/* Landing del LM de Jazmín Mirenda. Sale de su web (jazminmirenda.my.canva.site): portada oliva con la rama, fotos reales de ella,
   acento arena y crema, serif de exhibición. De su guía: los 4 puntos y la tarjeta de perfil tipo Instagram.
   Piso de legibilidad de las landings de LM: nada para leer bajo 16 px y contraste ≥ 4,5:1. */
:root {
  --oliva-900: #262a18;
  --oliva-700: #3d4229;
  --oliva-600: #4a4f30;
  --oliva-300: #8a8e6a;
  --opcion: #e4e6d3;
  --crema: #fffbf9;
  --arena: #d5c69e;
  --arena-sombra: #b4a372;
  --tinta: #262a18;
  --tinta-suave: #4d5140;
  --hueso: #f6f3ea;
  --error: #a3341f;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.55 var(--sans); color: var(--tinta); background: var(--crema); }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

.barra { background: var(--crema); border-bottom: 1px solid #ece6d6; }
.barra .dentro { max-width: 1120px; margin: 0 auto; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.barra .rubro { font-size: 16px; color: var(--tinta-suave); display: none; }

.dentro { max-width: 1120px; margin: 0 auto; padding: 0 14px; }
.angosto { max-width: 680px; margin: 0 auto; }

/* Portada: su foto oliva con la rama, oscurecida lo justo para que el texto blanco se lea */
.portada { background: linear-gradient(rgba(36, 40, 22, .5), rgba(36, 40, 22, .62)), url(/img/portada.jpg) 70% 30% / cover no-repeat; color: #fff; padding: 14px 0 32px; }
h1 { font: 300 35px/1.05 var(--display); margin: 4px 0 10px; letter-spacing: -.015em; }
h1 em { font-style: italic; color: var(--arena); }
.bajada { font-size: 18px; line-height: 1.45; margin: 0 0 16px; color: var(--hueso); }

.tarjeta { background: var(--crema); color: var(--tinta); border-radius: 22px; padding: 16px 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .22); }
.paso-n { font-size: 16px; font-weight: 600; color: var(--oliva-600); margin: 0 0 4px; }
.pregunta { font: 700 22px/1.25 var(--sans); color: var(--tinta); margin: 0 0 12px; outline: none; }
.pregunta-2 { font-size: 21px; margin-top: 2px; }
.texto-pregunta { font-size: 17px; color: var(--tinta-suave); margin: 0 0 10px; }

.opciones { display: grid; gap: 9px; }
.opcion {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: 600 18px/1.35 var(--sans); color: var(--tinta); background: var(--opcion);
  border: 1.5px solid var(--oliva-300); border-radius: 14px; padding: 12px 14px; box-shadow: 0 3px 0 #b8bb9c;
  cursor: pointer; transition: transform .08s, box-shadow .08s, background .15s, color .15s;
}
.opcion::after { content: "→"; font-weight: 700; font-size: 20px; color: var(--oliva-600); }
.opcion:hover { background: #dadcc5; }
.opcion:active, .opcion.elegida { transform: translateY(3px); box-shadow: 0 0 0 #b8bb9c; background: var(--oliva-600); color: #fff; border-color: var(--oliva-600); }
.opcion.elegida::after { color: var(--arena); }
.opcion:focus-visible, .boton:focus-visible, .volver:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.volver { background: none; border: 0; font: 600 16px var(--sans); color: var(--oliva-600); padding: 12px 0 0; cursor: pointer; text-decoration: underline; }

.campo { margin: 0 0 14px; }
.campo label { display: block; font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.campo input { width: 100%; font: 400 18px var(--sans); color: var(--tinta); background: #fff; border: 1.5px solid var(--oliva-300); border-radius: 12px; padding: 13px 14px; }
.campo input:focus { outline: 3px solid var(--arena); outline-offset: 1px; border-color: var(--oliva-600); }
.ayuda { font-size: 16px; color: var(--tinta-suave); margin-top: 6px; }
.err { color: var(--error); font-size: 16px; font-weight: 600; margin-top: 6px; }
.err:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#turnstile { margin: 4px 0 14px; min-height: 65px; }

/* Botón píldora, como el "esto es para vos" de su web, pero relleno para que se vea */
.boton {
  display: block; width: 100%; text-align: center; font: 700 19px/1.2 var(--sans); color: var(--oliva-900);
  background: var(--arena); border: 0; border-radius: 999px; padding: 17px 22px; box-shadow: 0 4px 0 var(--arena-sombra);
  cursor: pointer; text-decoration: none;
}
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--arena-sombra); }
.boton[disabled] { opacity: .6; cursor: wait; }
.privacidad { font-size: 16px; color: var(--tinta-suave); margin: 12px 0 0; }
.privacidad a { color: var(--oliva-600); }

section.banda { padding: 52px 0; }
h2 { font: 300 38px/1.1 var(--display); margin: 0 0 18px; letter-spacing: -.01em; }
h2 em { font-style: italic; }

/* Los 4 puntos de su guía (tarjetas crema) */
/* Qué miro en tu perfil: foto real de Jazmín Mirenda haciendo una auditoría (Alan Del Grosso, 12-oct). Es un <picture>
   con carga diferida (no le quita conexión a la portada) y UNA foto por pantalla (celular / escritorio, WebP con JPEG de
   respaldo). Celular: la foto arriba y limpia —la pantalla con esta misma sección y sus manos—, fundida al hueso, y los
   4 puntos debajo. Escritorio (más abajo): los puntos a la izquierda y la foto a la derecha. */
.banda.auditando { position: relative; padding-top: 0; background: var(--hueso); overflow: hidden; }
.auditando-foto { position: relative; display: block; }
.auditando-foto img { width: 100%; height: auto; max-height: 620px; aspect-ratio: 900 / 940; object-fit: cover; object-position: 50% 30%; }
.auditando-foto::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(rgba(246, 243, 234, 0), var(--hueso)); }
.auditando .dentro { position: relative; margin-top: -10px; }
.auditando h2 { color: var(--oliva-900); }
.puntos { display: grid; gap: 12px; }
.punto { display: flex; gap: 14px; align-items: flex-start; background: var(--crema); border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(38, 42, 24, .08); }
.numero { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--arena); color: var(--oliva-900); font: 700 20px/40px var(--sans); text-align: center; }
.punto h3 { font: 700 19px/1.3 var(--sans); margin: 2px 0 4px; }
.punto p { margin: 0; font-size: 17px; color: var(--tinta-suave); }

/* Banda oliva: para quién es */
.oliva { background: var(--oliva-600); color: #fff; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista li { background: rgba(255, 251, 249, .1); border: 1px solid rgba(255, 251, 249, .3); border-radius: 16px; padding: 14px 16px; }

/* Testimonios */
.testimonios { display: grid; gap: 14px; }
.testimonio { background: #fff; border: 1px solid #ece6d6; border-radius: 20px; padding: 22px 20px 18px; margin: 0; }
.testimonio blockquote { margin: 0 0 14px; font: italic 300 22px/1.35 var(--display); color: var(--tinta); }
.testimonio blockquote::before { content: "“"; display: block; height: 24px; font: 400 52px/1 var(--display); color: var(--arena-sombra); margin: 0 0 2px -2px; }
/* Su toque en las fotos: marco en arco con borde arena y un tono apenas más cálido, para que convivan con su paleta. */
.testimonio figcaption { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-size: 16px; line-height: 1.4; color: var(--tinta-suave); }
.testimonio figcaption img {
  flex: none; width: 80px; height: 100px; object-fit: cover; border-radius: 999px 999px 16px 16px;
  border: 3px solid var(--crema); box-shadow: 0 0 0 1.5px var(--arena), 0 8px 18px rgba(38, 42, 24, .12); filter: saturate(.86) sepia(.06);
}
.testimonio figcaption b { color: var(--tinta); font-size: 17px; }

/* Cierre: quién soy, con la foto de Jazmín Mirenda (Alan Del Grosso: "que se vean sus ojos y su cuello").
   Celular (90 % de las visitas): su cara y su cuello arriba, a todo el ancho y SIN oscurecer; la foto se funde con el oliva
   profundo y el texto va debajo, sin taparla. Escritorio (más abajo): como en su web, foto entera y texto a la izquierda. */
.banda.cierre {
  --alto-foto: min(125vw, 600px); /* retrato 4:5 */
  background: linear-gradient(180deg, rgba(38, 42, 24, 0) calc(var(--alto-foto) * .8), #262a18 var(--alto-foto)),
    url(/img/jaz-retrato.jpg) 50% 0 / auto var(--alto-foto) no-repeat, #262a18;
  padding-top: calc(var(--alto-foto) * .92);
  color: #fff;
}
@media (min-width: 481px) and (max-width: 899px) { /* tableta: el retrato es más angosto que la pantalla → bordes fundidos */
  .banda.cierre {
    background: linear-gradient(90deg, #262a18 calc(50% - 240px), rgba(38, 42, 24, 0) calc(50% - 170px), rgba(38, 42, 24, 0) calc(50% + 170px), #262a18 calc(50% + 240px)),
      linear-gradient(180deg, rgba(38, 42, 24, 0) 480px, #262a18 600px), url(/img/jaz-retrato.jpg) 50% 0 / auto 600px no-repeat, #262a18;
  }
}
.perfil { display: flex; gap: 16px; align-items: center; background: var(--crema); color: var(--tinta); border-radius: 22px; padding: 16px 18px; }
.anillo { flex: none; width: 88px; height: 88px; border-radius: 50%; padding: 3px; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.anillo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid var(--crema); }
.perfil b { display: block; font-size: 18px; }
.perfil span { font-size: 16px; color: var(--tinta-suave); }
.sobre { margin: 18px 0 8px; color: var(--hueso); }
.verbos { font: italic 300 24px/1.4 var(--display); color: var(--arena); margin: 0 0 30px; }
.cierre h2 { margin-top: 8px; }

footer { background: var(--crema); padding: 26px 16px 34px; font-size: 16px; color: var(--tinta-suave); text-align: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 6px; }
footer a { color: var(--oliva-600); font-weight: 600; }

/* Confirmaciones y privacidad */
.simple { min-height: 100vh; }
.simple .portada { padding: 32px 0 56px; min-height: calc(100vh - 59px); }
.confirmacion { max-width: 560px; margin: 0 auto; }
.confirmacion h1 { color: var(--tinta); font-size: 40px; margin: 12px 0 12px; }
.confirmacion p { margin: 0 0 14px; }
.check { width: 56px; height: 56px; border-radius: 50%; background: var(--arena); color: var(--oliva-900); font: 700 30px/56px var(--sans); text-align: center; }
.enlace-suave { display: block; text-align: center; margin-top: 18px; font-weight: 600; color: var(--oliva-600); }
.legal { max-width: 720px; margin: 0 auto; padding: 36px 16px 56px; }
.legal h1 { color: var(--tinta); font-size: 42px; }
.legal h2 { font: 700 19px/1.3 var(--sans); margin: 24px 0 6px; }
.legal p, .legal li { font-size: 17px; color: var(--tinta-suave); }

@media (min-width: 900px) {
  .barra .rubro { display: block; }
  .barra .dentro { padding: 10px 16px; }
  .marca img { width: 38px; height: 38px; }
  .dentro { padding: 0 16px; }
  .portada { padding: 40px 0 64px; }
  .tarjeta { padding: 26px; }
  .pregunta { font-size: 23px; }
  .opcion { padding: 14px 16px; }
  .cuadro { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: start; }
  h1 { font-size: 66px; margin-top: 48px; }
  .bajada { font-size: 20px; max-width: 32ch; }
  section.banda { padding: 80px 0; }
  h2 { font-size: 52px; }
  .puntos { grid-template-columns: 1fr 1fr; }
  .banda.auditando { padding: 96px 0; }
  .auditando-foto { position: absolute; inset: 0; }
  .auditando-foto img { height: 100%; max-height: none; aspect-ratio: auto; object-position: 50% 50%; }
  .auditando-foto::after { inset: 0; height: auto; background: linear-gradient(90deg, rgba(246, 243, 234, .96) 0%, rgba(246, 243, 234, .9) 40%, rgba(246, 243, 234, .45) 52%, rgba(246, 243, 234, 0) 62%); }
  .auditando .angosto { max-width: 600px; margin: 0 auto 0 max(0px, calc((100% - 1120px) / 2)); }
  .testimonios { grid-template-columns: 1fr 1fr; }
  .testimonio:last-child:nth-child(odd) { grid-column: 1 / -1; } /* si son impares, la última va a lo ancho */
  /* Cierre: la foto entera y luminosa; su cara a la derecha, sin oscurecer; el texto a la izquierda, sobre el brazo
     desenfocado, con la sombra solo de ese lado (como en su web). */
  .banda.cierre {
    background: linear-gradient(90deg, rgba(20, 24, 14, .86) 0%, rgba(20, 24, 14, .7) 30%, rgba(20, 24, 14, .38) 46%, rgba(20, 24, 14, 0) 58%),
      url(/img/jaz-fondo.jpg) 70% 30% / cover no-repeat, #262a18;
    padding: 96px 0;
  }
  .cierre .angosto { max-width: 500px; margin-left: max(0px, calc((100% - 1120px) / 2)); margin-right: auto; }
  .boton.corto { width: auto; display: inline-block; min-width: 320px; }
}

/* WhatsApp con bandera: la caja muestra bandera y código; encima va el selector nativo, invisible (en el celular abre
   la rueda del sistema). */
.telefono { display: flex; gap: 8px; }
.telefono .pais { position: relative; flex: none; }
.pais-caja {
  display: flex; align-items: center; gap: 6px; height: 100%; min-height: 52px; padding: 0 12px;
  background: #fff; border: 1.5px solid var(--oliva-300); border-radius: 12px; font: 600 17px var(--sans); color: var(--tinta);
}
.pais-caja .bandera { font-size: 22px; line-height: 1; }
.pais-caja .flecha { font-size: 13px; color: var(--tinta-suave); }
.telefono select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.telefono select:focus-visible + .pais-caja, .telefono .pais:focus-within .pais-caja { outline: 3px solid var(--arena); outline-offset: 1px; }
.telefono input { flex: 1; min-width: 0; }
.tel-mensaje { font-size: 16px; margin-top: 6px; }
.tel-mensaje:empty { display: none; }
.tel-mensaje.bien { color: var(--oliva-600); font-weight: 600; }
.tel-mensaje.mal { color: var(--error); font-weight: 600; }
.sugerencia { font-size: 16px; margin-top: 6px; color: var(--tinta); }
.sugerencia:empty { display: none; }
.corregir { border: 0; background: var(--arena); color: var(--oliva-900); font: 700 15px var(--sans); border-radius: 999px; padding: 5px 12px; cursor: pointer; }

/* Buscador de país (se abre al tocar la bandera): se escribe y la lista se filtra; lista corta, no los +200. */
.pais-caja { cursor: pointer; user-select: none; }
.pais-caja:focus-visible { outline: 3px solid #d5c69e; outline-offset: 1px; }
.pais-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(330px, calc(100vw - 32px)); padding: 8px;
  background: #fff; border: 1px solid #ece6d6; border-radius: 16px; box-shadow: 0 16px 40px rgba(38, 42, 24, .18); text-align: left;
}
.pais-buscar { width: 100%; height: 44px; border: 1px solid #ece6d6; border-radius: 12px; padding: 0 12px; font-size: 16px; background: #f6f3ea; color: #262a18; }
.pais-buscar:focus { outline: none; border-color: #8a8e6a; background: #fff; }
.pais-lista { list-style: none; margin: 6px 0 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.pais-lista [role="option"] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 16px; color: #262a18; }
.pais-lista [role="option"] .b { font-size: 20px; line-height: 1; }
.pais-lista [role="option"] .n { flex: 1; min-width: 0; }
.pais-lista [role="option"] .c { font-size: 14px; color: #4d5140; font-variant-numeric: tabular-nums; }
.pais-lista [role="option"]:hover, .pais-lista .activo { background: #e4e6d3; }
.pais-lista [aria-selected="true"] { font-weight: 700; }
.pais-grupo { padding: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8e6a; }
.pais-vacio, .pais-ayuda { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.35; color: #4d5140; }
.pais-ayuda { margin-top: 6px; border-top: 1px solid #ece6d6; }

/* Aviso de cookies: visitas desde Europa (o quien toca "Cookies" al pie). Fijo abajo sin tapar la página entera; los botones
   de cada pantalla iguales, porque rechazar tiene que ser tan fácil como aceptar. Mientras está abierto, la página suma
   espacio abajo. "Configurar" muestra una casilla por herramienta (más alta: si no entra, se desplaza adentro). */
.aviso-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--crema); color: var(--tinta);
  border-top: 1px solid var(--arena-sombra); box-shadow: 0 -8px 24px rgba(38, 42, 24, .16);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow-y: auto;
}
.aviso-cookies[hidden], .aviso-cookies [hidden] { display: none; }
.aviso-cookies [data-vista] { max-width: 640px; margin: 0 auto; }
.aviso-cookies p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.aviso-cookies .aviso-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.aviso-escudo { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--oliva-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso-enlaces { display: flex; gap: 24px; }
.aviso-cookies a, .aviso-enlace { color: var(--oliva-600); font: 600 16px/1.45 var(--sans); }
.aviso-enlace { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.aviso-cookies .aviso-bajada, .aviso-desc, .aviso-cookies .aviso-nota { color: var(--tinta-suave); }
.aviso-opcion { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0;
  border-top: 1px solid #ece6d6; font-size: 16px; line-height: 1.45; cursor: pointer; }
.aviso-opcion b { display: block; font-size: 17px; }
.aviso-desc { display: block; }
.aviso-cookies .aviso-nota { border-top: 1px solid #ece6d6; padding-top: 12px; }
/* Interruptor: la casilla de siempre (accesible, se marca con espacio o toque), dibujada como botón de prender y apagar.
   Arranca apagado. Apagado #8d8a76 = contraste 3,4:1 contra la crema (lo mínimo para un control es 3:1). */
.aviso-opcion input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0;
  border-radius: 999px; background: #8d8a76; cursor: pointer; transition: background .15s; }
.aviso-opcion input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.aviso-opcion input:checked { background: var(--oliva-600); }
.aviso-opcion input:checked::after { transform: translateX(20px); }
.aviso-opcion input:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.aviso-botones { display: flex; gap: 10px; margin-top: 4px; }
.aviso-botones .boton { flex: 1; padding: 13px 12px; font-size: 18px; }
body.con-aviso { padding-bottom: 340px; }
.legal ul { padding-left: 20px; }
/* Franja de visita interna (?interno=1): solo la ven la dueña y el equipo, para comprobar que su navegador no se mide. */
.aviso-interno { margin: 0; padding: 8px 16px; background: var(--oliva-600); color: #fff; font: 600 16px/1.4 var(--sans); text-align: center; }
.aviso-interno a { color: var(--arena); }

/* Su link para agendar (agendar.html, 25-oct): como Calendly, con su marca. Celular: quién y qué arriba, después el mes, los
   horarios del día y sus datos. Computadora: quién y qué a la izquierda; el mes y los horarios lado a lado a la derecha. */
.agenda-publica { padding: 14px 0 44px; background: var(--hueso); min-height: calc(100vh - 51px); }
.tarjeta-reserva { display: grid; max-width: 1000px; margin: 0 auto; background: var(--crema); border-radius: 22px; box-shadow: 0 14px 40px rgba(38, 42, 24, .12); overflow: hidden; }
.reserva-quien { padding: 22px 18px 18px; border-bottom: 1px solid #ece6d6; }
.reserva-foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid var(--crema); box-shadow: 0 0 0 2px var(--arena), 0 8px 18px rgba(38, 42, 24, .14); }
.reserva-nombre { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: var(--tinta-suave); }
.reserva-quien h1 { margin: 4px 0 10px; font: 300 34px/1.08 var(--display); color: var(--tinta); }
.reserva-detalle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--oliva-600); }
.punto-sep { color: var(--oliva-300); }
.icono-reloj, .icono-video { width: 18px; height: 18px; background: center / contain no-repeat; }
.icono-reloj { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.icono-video { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='m15 10 6-3v10l-6-3z'/%3E%3C/svg%3E"); }
.reserva-texto { margin: 0; font-size: 17px; color: var(--tinta-suave); }
.reserva-texto:empty { display: none; }
.reserva-cuerpo { padding: 18px; min-width: 0; }
.reserva-saludo { margin: 0 0 12px; font: 300 26px/1.15 var(--display); color: var(--tinta); }
.reserva-cargando { padding: 30px 0; font-size: 17px; color: var(--tinta-suave); text-align: center; }
.reserva-paso { margin: 0 0 12px; font: 700 19px/1.3 var(--sans); color: var(--tinta); outline: none; }
.mes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.mes b { font: 400 23px/1 var(--display); text-transform: capitalize; color: var(--tinta); }
.mes button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #e4e0d2; background: #fff; font: 600 22px/1 var(--sans); color: var(--oliva-600); cursor: pointer; }
.mes button:hover:not([disabled]) { border-color: var(--oliva-300); }
.mes button[disabled] { opacity: .3; cursor: default; }
.semana-cabeza, .dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.semana-cabeza span { padding: 4px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.dia { width: 100%; aspect-ratio: 1; max-height: 50px; justify-self: center; border: 0; border-radius: 50%; background: transparent; font: 600 16px var(--sans); color: #b3b09f; cursor: default; }
.dia.libre { background: var(--opcion); color: var(--oliva-900); cursor: pointer; }
.dia.libre:hover { background: #d8dbc1; }
.dia.hoy { box-shadow: inset 0 0 0 1.5px var(--arena-sombra); }
.dia[aria-pressed="true"] { background: var(--oliva-600); color: #fff; }
.dia:focus-visible, .hora:focus-visible, .mes button:focus-visible, .volver-horario:focus-visible, .cambiar-correo:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
/* La zona horaria como Calendly (25-oct, Alan Del Grosso: "con la barra de búsqueda, poder pasar de am/pm a 24h… por zona horaria"):
   el botón con la zona y su hora de ahora; al tocarlo, el buscador, am/pm · 24 h y la lista por región (public/js/zona-horaria.js).
   La flecha, con aire: a 18 px del borde y el texto nunca debajo (regla fija de Alan Del Grosso, 21 y 25-oct; la vigila
   test/zonas.test.mjs). La lista va fija sobre la pantalla: el script le pone la posición. */
.zona { margin: 16px 0 0; }
.zh { position: relative; }
.zh-boton { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 10px 48px 10px 14px;
  border: 1px solid #e4e0d2; border-radius: 12px; background-color: #fff; font: 600 15px/1.3 var(--sans); color: var(--tinta); text-align: left; cursor: pointer; }
.zh-boton:hover { border-color: var(--oliva-300); }
.zh-boton:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.zh-mundo { flex: none; width: 18px; height: 18px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.6 3.4 5.4 3.4 8.5s-1 5.9-3.4 8.5c-2.4-2.6-3.4-5.4-3.4-8.5s1-5.9 3.4-8.5z'/%3E%3C/svg%3E"); }
.zh-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-ahora { flex: none; font-weight: 500; color: var(--tinta-suave); }
.zh-flecha { position: absolute; right: 18px; top: 50%; width: 12px; height: 8px; margin-top: -4px; transition: transform .15s;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234d5140' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E"); }
.zh-boton[aria-expanded="true"] .zh-flecha { transform: rotate(180deg); }
.zh-panel { position: fixed; z-index: 50; display: flex; flex-direction: column; padding: 12px 0 6px; background: #fff; border: 1px solid #ece6d6;
  border-radius: 16px; box-shadow: 0 16px 44px rgba(38, 42, 24, .2); }
.zh-panel[hidden] { display: none; }
.zh-busqueda { position: relative; flex: none; margin: 0 12px 8px; }
.zh-lupa { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5140' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"); }
.zh-buscar { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1.5px solid var(--oliva-300); border-radius: 10px; background: #fff; font: 400 16px var(--sans); color: var(--tinta); }
.zh-buscar:focus { outline: 3px solid var(--arena); outline-offset: 1px; border-color: var(--oliva-600); }
/* Sin la × azul de Chrome en el buscador (no es de su marca): se borra con la tecla de borrar. */
.zh-buscar::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.zh-cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 8px; }
.zh-titulo { font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); }
.zh-formato { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.zh-interruptor { position: relative; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: #c9c6b6; cursor: pointer; transition: background .15s; }
.zh-interruptor[aria-checked="true"] { background: var(--oliva-600); }
.zh-perilla { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.zh-interruptor[aria-checked="true"] .zh-perilla { transform: translateX(16px); }
.zh-interruptor:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
.zh-lista { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.zh-region { padding: 12px 16px 4px; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.zh-opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: 15px; line-height: 1.3; color: var(--tinta); cursor: pointer; }
.zh-opcion.activa { background: var(--hueso); }
.zh-opcion[aria-selected="true"] { background: var(--opcion); font-weight: 700; }
.zh-hora { flex: none; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.zh-region[hidden], .zh-opcion[hidden], .zh-nada[hidden] { display: none; }
.zh-nada { margin: 8px 16px 12px; font-size: 15px; color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { .zh-flecha, .zh-perilla, .zh-interruptor { transition: none; } }
.reserva-cambio { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--hueso); font-size: 16px; font-weight: 600; color: var(--tinta); }
.boton.borde { background: transparent; color: var(--oliva-700); box-shadow: inset 0 0 0 1.5px var(--oliva-300); }
#r-final-cambiar { max-width: 360px; margin: 0 auto 10px; }
.reserva-horas { margin-top: 18px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
/* Los horarios con un borde fino y suave (25-oct, Alan Del Grosso: "tienen como un contorno muy fuerte que hace ruido"), como Calendly. */
.hora { min-height: 48px; border: 1px solid rgba(74, 79, 48, .26); border-radius: 12px; background: #fff; font: 700 17px var(--sans); color: var(--oliva-700); cursor: pointer; transition: border-color .12s, background-color .12s; }
.hora:hover { border-color: var(--oliva-600); background: var(--hueso); }
.volver-horario { margin: 0 0 10px; padding: 6px 0; border: 0; background: none; font: 600 16px var(--sans); color: var(--oliva-600); text-decoration: underline; cursor: pointer; }
.elegido { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--hueso); font-size: 17px; font-weight: 700; color: var(--tinta); }
.correo-conocido { margin: 0 0 14px; font-size: 17px; color: var(--tinta-suave); }
.correo-conocido b { color: var(--tinta); }
.cambiar-correo { padding: 0; border: 0; background: none; font: 600 16px var(--sans); color: var(--oliva-600); text-decoration: underline; cursor: pointer; }
.reserva-final { padding: 18px 4px 6px; text-align: center; outline: none; }
.final-icono { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--oliva-600); color: #fff; font: 700 30px/1 var(--sans); }
.final-icono.suave { background: var(--opcion); color: var(--oliva-900); font-size: 28px; }
.reserva-final h2 { margin: 14px 0 8px; font: 300 30px/1.15 var(--display); color: var(--tinta); }
.final-cuando { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--oliva-700); }
.final-texto { margin: 0 auto 18px; max-width: 46ch; font-size: 17px; color: var(--tinta-suave); }
.boton-whatsapp { max-width: 360px; margin: 0 auto 8px; }

@media (min-width: 900px) {
  .agenda-publica { padding: 36px 0 64px; }
  .tarjeta-reserva { grid-template-columns: 320px minmax(0, 1fr); }
  .reserva-quien { padding: 34px 28px; border-bottom: 0; border-right: 1px solid #ece6d6; }
  .reserva-quien h1 { font-size: 40px; margin-top: 6px; }
  .reserva-cuerpo { padding: 30px 30px 34px; }
  .reserva-elegir { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0 28px; align-items: start; }
  .reserva-horas { margin-top: 0; }
  .reserva-horas .horas { grid-template-columns: 1fr; max-height: 430px; overflow-y: auto; padding-right: 4px; }
  .reserva-datos { max-width: 520px; }
}

/* El espacio de cada clienta (/tu-espacio; 25-oct, y 26-oct a la noche, Alan Del Grosso: "en ver como la clienta no se ve tal cual, se ve
   como formato cel… falta mejorar toda la estética y visual de todo esto"): el mismo sistema que su ficha en la gestión (lo de MARPIEM con los
   colores y la letra de Jazmín Mirenda): el fondo hueso y superficies sin bordes con la luz desde arriba; en la computadora, dos columnas (lo
   que se lee: su próxima clase y sus clases; lo que se usa: sus pasos, escribirle y sus materiales); en el celular, una, en orden de importancia. */
.espacio-pagina { background: var(--hueso); }
.espacio-pagina .barra { background: transparent; border-bottom: 0; }
.espacio { padding: 18px 0 56px;
  --luz: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(38, 42, 24, .035), 0 1px 2px rgba(38, 42, 24, .07), 0 10px 28px -12px rgba(38, 42, 24, .18);
  --luz-chica: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(38, 42, 24, .04), 0 1px 2px rgba(38, 42, 24, .09), 0 4px 10px -5px rgba(38, 42, 24, .16);
  --filo: rgba(38, 42, 24, .085); --hundido: rgba(38, 42, 24, .055); --toque: rgba(38, 42, 24, .03); --curva: cubic-bezier(.16, 1, .3, 1); }
.espacio-dentro { max-width: 1120px; }
.espacio-cargando { margin: 40px 0; text-align: center; color: var(--tinta-suave); }
/* La puerta (sin sesión): angosta y en el centro. */
.espacio-entrar { display: grid; justify-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 18px 0; text-align: center; }
.espacio-entrar h1 { color: var(--tinta); font-size: 44px; margin: 6px 0 0; }
.espacio-entrar h1 em { color: var(--oliva-600); }
.espacio-foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 3px var(--hueso), 0 0 0 5px var(--arena); }
.espacio-foto.chica { width: 64px; height: 64px; }
.espacio-bajada { max-width: 460px; margin: 0; color: var(--tinta-suave); }
.espacio-entrar form { display: grid; gap: 10px; width: min(420px, 100%); margin-top: 8px; text-align: left; }
.espacio-entrar label { font-size: 16px; font-weight: 600; color: var(--oliva-700); }
.espacio-entrar input[type="email"], .espacio-entrar input[type="password"] { width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; background: #fff; box-shadow: var(--luz-chica); font: 400 17px/1.4 var(--sans); color: var(--tinta); }
.espacio-entrar input[type="email"]:focus, .espacio-entrar input[type="password"]:focus { outline: none; box-shadow: var(--luz-chica), 0 0 0 4px rgba(213, 198, 158, .5); }
.espacio-aviso { max-width: 460px; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; background: #fdf3ef; color: var(--error); font-weight: 600; }
.espacio-mensaje { margin: 0; min-height: 1.5em; font-size: 16px; line-height: 1.45; color: var(--tinta-suave); }
.espacio-mensaje.bien { color: #3d5a2a; font-weight: 600; }
.espacio-mensaje.mal { color: var(--error); font-weight: 600; }
.espacio-ayuda { max-width: 420px; margin: 6px 0 0; font-size: 16px; color: var(--tinta-suave); }
.espacio-vista { margin: 0 0 18px; padding: 10px 16px; border-radius: 14px; background: #f3ead2; color: var(--tinta); font-size: 16px; font-weight: 600; text-align: center; }
/* Arriba: su foto, el saludo y su avance (el anillo, como en su ficha de la gestión). */
.espacio-hola { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 4px 0 26px; }
.espacio-hola-texto > * { margin: 0; }
.espacio-hola h1 { color: var(--tinta); font-size: 42px; line-height: 1.05; }
.espacio-hola h1 em { color: var(--oliva-600); }
.espacio-saludo { margin: 0 0 4px; font-weight: 600; color: var(--oliva-700); }
.espacio-avance { display: flex; align-items: center; gap: 12px; }
.espacio-avance p { margin: 0; font-size: 15px; line-height: 1.2; color: var(--tinta-suave); }
.espacio-avance b { display: block; font: 300 24px/1.1 var(--display); color: var(--tinta); }
.espacio-anillo { flex: none; width: 56px; height: 56px; }
.espacio-anillo svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.espacio-anillo circle { fill: none; stroke-width: 4; }
.espacio-anillo .pista { stroke: var(--opcion); }
.espacio-anillo .avance { stroke: var(--oliva-600); stroke-linecap: round; animation: espacio-anillo 900ms var(--curva) 150ms both; }
@keyframes espacio-anillo { from { stroke-dasharray: 0 100; } }
/* Las dos columnas (en la computadora); en el celular, una, en orden de importancia. */
.espacio-mesa { display: grid; gap: 18px; }
.espacio-principal, .espacio-lado { display: grid; gap: 18px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .espacio-mesa { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
  .espacio-principal, .espacio-lado { gap: 24px; }
}
@media (max-width: 999px) {
  .espacio-principal, .espacio-lado { display: contents; }
  .espacio-tarjeta.proxima { order: 1; }
  .espacio-tus-pasos { order: 2; }
  .espacio-tus-clases { order: 3; }
  .espacio-tus-mensajes { order: 4; }
  .espacio-tus-materiales { order: 5; }
}
/* Las superficies: sin bordes, con la luz desde arriba. */
.espacio-tarjeta { display: grid; gap: 12px; margin: 0; padding: 22px 24px; border: 0; border-radius: 24px; background: linear-gradient(180deg, #fffefb, #fcf9f2); box-shadow: var(--luz); }
.espacio-tarjeta > * { margin: 0; }
.espacio-tarjeta h2 { font: 300 26px/1.15 var(--display); color: var(--tinta); }
/* Su próxima clase: la tarjeta de color (oliva, con su luz arriba y su resplandor). */
.espacio-tarjeta.proxima { gap: 10px; padding: 24px 26px 26px; background: linear-gradient(180deg, #4f5434, var(--oliva-700)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .25), 0 18px 36px -16px rgba(38, 42, 24, .65); }
.espacio-tarjeta.proxima h2 { color: var(--arena); }
.espacio-tarjeta.proxima .espacio-suave { color: var(--hueso); }
.espacio-tarjeta.proxima .boton { justify-self: start; width: auto; margin-top: 8px; padding: 15px 30px; }
.espacio-cuando { font: 300 30px/1.2 var(--display); }
.espacio-suave { color: var(--tinta-suave); font-size: 16px; }
/* Sus clases: una fila por clase (su número, su nombre, su día y lo que tiene); la que tiene algo se abre ahí mismo. */
.espacio-clases { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.espacio-clase { margin: 0; padding: 0; }
.espacio-clase + .espacio-clase { background: linear-gradient(var(--filo), var(--filo)) 64px 0 / calc(100% - 74px) 1px no-repeat; }
.espacio-clase-cabeza { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 10px; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 16px; list-style: none; }
summary.espacio-clase-cabeza { cursor: pointer; transition: background-color .15s; }
summary.espacio-clase-cabeza:hover { background: var(--toque); }
summary.espacio-clase-cabeza::-webkit-details-marker { display: none; }
summary.espacio-clase-cabeza:focus-visible { outline: 3px solid var(--arena); outline-offset: -3px; }
.espacio-clase.sin-nada .espacio-clase-cabeza { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
.espacio-clase.sin-nada .espacio-clase-tiene { grid-column: 2; }
.espacio-numero { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--opcion); font: 400 20px/1 var(--display); color: var(--oliva-700); }
.espacio-clase-texto { display: grid; gap: 2px; min-width: 0; }
.espacio-clase-texto b { font-size: 17px; font-weight: 600; }
.espacio-clase-texto small { font-size: 15px; color: var(--tinta-suave); }
.espacio-clase-tiene { font-size: 15px; color: var(--tinta-suave); }
.espacio-flecha { width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #b6b19f; border-bottom: 2px solid #b6b19f; transform: rotate(45deg); transition: transform .2s; }
details[open] > summary .espacio-flecha { margin-top: 4px; transform: rotate(-135deg); }
.espacio-clase-cuerpo { display: grid; gap: 16px; padding: 4px 10px 22px 64px; }
.espacio-grabacion { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--hundido);
  color: var(--tinta); text-decoration: none; transition: background-color .15s; }
.espacio-grabacion:hover { background: rgba(38, 42, 24, .08); }
.espacio-grabacion b { display: block; font-size: 16px; }
.espacio-grabacion small { font-size: 14px; color: var(--tinta-suave); }
.espacio-icono-video { width: 38px; height: 38px; border-radius: 12px; background: var(--opcion) center / 19px 19px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4229' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='13' height='11' rx='2.5'/%3E%3Cpath d='m15.5 10.3 6-3.3v10l-6-3.3'/%3E%3C/svg%3E"); }
.espacio-sale { color: var(--tinta-suave); }
.espacio-resumen { font-size: 17px; line-height: 1.65; }
.espacio-resumen p { margin: 0 0 12px; }
.espacio-resumen p:last-child { margin-bottom: 0; }
.espacio-resumen a { color: var(--oliva-700); }
/* Sus pasos: filas con su casilla; los hechos, plegados. */
.espacio-pasos { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.espacio-paso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px; border-radius: 14px; }
.espacio-paso + .espacio-paso { background: linear-gradient(var(--filo), var(--filo)) 46px 0 / calc(100% - 56px) 1px no-repeat; }
.espacio-paso label { display: flex; align-items: center; gap: 14px; font-weight: 500; cursor: pointer; }
.espacio-paso input { width: 22px; height: 22px; flex: none; accent-color: var(--oliva-600); }
.espacio-paso small { flex-basis: 100%; padding-left: 36px; font-size: 14px; color: var(--tinta-suave); }   /* debajo del texto, no de la casilla */
.espacio-paso.hecho label span { text-decoration: line-through; color: var(--tinta-suave); }
.espacio-hechos > summary { display: flex; align-items: center; gap: 10px; list-style: none; padding: 4px 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tinta-suave); }
.espacio-hechos > summary::-webkit-details-marker { display: none; }
.espacio-hechos > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid #b6b19f; border-bottom: 2px solid #b6b19f; transform: rotate(45deg); transition: transform .2s; }
.espacio-hechos[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.espacio-hechos .espacio-pasos { margin-top: 6px; }
/* Sus materiales. */
.espacio-materiales { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.espacio-materiales li + li { background: linear-gradient(var(--filo), var(--filo)) 10px 0 / calc(100% - 20px) 1px no-repeat; }
.espacio-materiales a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; border-radius: 14px; font-weight: 600; text-decoration: none;
  color: var(--tinta); transition: background-color .15s; }
.espacio-materiales a:hover { background: var(--toque); }
/* El pie. */
.espacio-pie { display: grid; justify-items: center; gap: 6px; margin-top: 32px; padding: 0; background: transparent; text-align: center; color: var(--tinta-suave); font-size: 16px; }   /* (sin el fondo del pie de la página) */
.espacio-pie p { margin: 0; }
.espacio-salir { border: 0; background: transparent; color: var(--tinta-suave); font: 600 15px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
/* Escribirle a Jaz desde su espacio (26-oct): la charla en globos y el campo para escribir. */
.espacio-charla { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 380px; overflow-y: auto; }
.espacio-charla .globo { max-width: 86%; padding: 10px 14px; border-radius: 18px; background: #f1eee4; }
.espacio-charla .globo p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.espacio-charla .globo small { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-suave); }
.espacio-charla .globo.mio { justify-self: end; background: #e9edda; border-bottom-right-radius: 6px; }
.espacio-charla .globo.suyo { justify-self: start; border-bottom-left-radius: 6px; }
.espacio-charla .sin-mensajes { padding: 4px 0; }
.espacio-escribir { display: grid; gap: 8px; }
.espacio-escribir textarea { width: 100%; min-height: 84px; border: 0; border-radius: 16px; padding: 12px 14px; background: var(--hundido); font: 400 17px/1.45 var(--sans); color: var(--tinta); resize: vertical; }
.espacio-escribir textarea:focus { outline: none; background: #fff; box-shadow: var(--luz-chica), 0 0 0 4px rgba(213, 198, 158, .45); }
.espacio-escribir-pie { display: flex; justify-content: flex-end; }
.boton.chico-boton { width: auto; padding: 11px 26px; font-size: 17px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .espacio-anillo .avance { animation: none; } }
@media (max-width: 560px) {
  .espacio-entrar h1 { font-size: 38px; }
  .espacio-hola { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; margin-bottom: 20px; }
  .espacio-hola .espacio-foto.chica { width: 52px; height: 52px; }
  .espacio-hola h1 { font-size: 31px; }
  .espacio-avance { grid-column: 1 / -1; }
  .espacio-tarjeta { padding: 18px; border-radius: 20px; }
  .espacio-tarjeta.proxima { padding: 20px; }
  .espacio-tarjeta.proxima .boton { justify-self: stretch; width: 100%; }
  .espacio-cuando { font-size: 26px; }
  .espacio-clase-cabeza { grid-template-columns: 36px minmax(0, 1fr) 10px; gap: 4px 12px; }
  .espacio-clase-cabeza .espacio-numero { grid-row: 1 / 3; width: 36px; height: 36px; font-size: 18px; }
  .espacio-clase-cabeza .espacio-clase-tiene { grid-column: 2; grid-row: 2; }
  .espacio-clase-cabeza .espacio-flecha { grid-column: 3; grid-row: 1 / 3; }
  .espacio-clase.sin-nada .espacio-clase-cabeza { grid-template-columns: 36px minmax(0, 1fr); }
  .espacio-clase-cuerpo { padding: 4px 6px 18px; }
}

/* Sin materiales, una sola columna. La lista de cada sesión y su workbook (1-nov-2026). */
@media (min-width: 900px) { .espacio-mesa.sola { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; } }
.espacio-sesion-lista { display: grid; gap: 10px; margin-top: 20px; }
.espacio-sesion-lista h3 { margin: 0; font: 700 17px/1.3 var(--sans); }
.espacio-workbook { display: grid; gap: 12px; margin-top: 6px; }
.espacio-aviso-canva { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--hundido); font-size: 15px; line-height: 1.5; }
.espacio-icono-doc { width: 38px; height: 38px; border-radius: 10px; background: #e2e6d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5434' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E") center / 20px no-repeat; }
.espacio-subir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.espacio-subir small { font-size: 14px; color: var(--tinta-suave); }
.espacio-subir label.boton { cursor: pointer; }
.espacio-subir label.apagado { opacity: .5; pointer-events: none; }
.espacio-archivo { border: 0; padding: 4px 0; background: transparent; color: var(--oliva-700, #4b5434); font: 600 15px/1.3 var(--sans); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.espacio-olvide { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.espacio-entrar input[hidden], .espacio-entrar label[hidden] { display: none; }
.espacio-hola { grid-template-columns: 68px minmax(0, 1fr) auto; }
.espacio-yo { position: relative; display: grid; place-items: center; width: 68px; height: 68px; }
.espacio-yo svg { position: absolute; inset: 0; }
.espacio-yo circle { stroke-width: 3; }
.espacio-yo .iniciales { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e2e6d3; font: 300 24px/1 var(--display); color: var(--oliva-600); }
.espacio-workbook h3 { margin: 6px 0 0; font: 700 17px/1.3 var(--sans); }
.espacio-paso-wb { display: block; margin: 0; font-size: 15px; line-height: 1.5; }
.espacio-copia { display: flex; flex-wrap: wrap; gap: 10px; }
.espacio-copia input { flex: 1 1 240px; min-width: 0; border: 0; border-radius: 14px; padding: 12px 14px; background: #fff; box-shadow: var(--luz-chica); font: 400 16px/1.4 var(--sans); color: var(--tinta); }
.espacio-copia input:focus { outline: none; box-shadow: var(--luz-chica), 0 0 0 4px rgba(213, 198, 158, .5); }
.barra .espacio-salir { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--luz-chica); color: var(--tinta); text-decoration: none; cursor: pointer; }
.barra .rubro[hidden] { display: none; }