/* LUMA · estilo cálido y elegante (lavanda, ciruela, dorado y crema). Los colores salen de /marca/tema.css
   (los elige el negocio en «Mi marca»); acá quedan los de fábrica por si ese archivo no carga. */
@font-face { font-family: "Cinzel"; src: url("../fuentes/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fuentes/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fuentes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fuentes/plus-jakarta-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --principal: #7b4fa0; --oscuro: #3b1f4f; --dorado: #c9963a; --dorado-claro: #f3d68a; --crema: #fbf4ea;
  --texto: #2e2236; --suave: #6f6177; --borde: #e6dbe9; --blanco: #fff; --ok: #2f7d5b; --error: #a8323e;
  --radio: 18px; --sombra: 0 10px 30px rgba(59, 31, 79, .10);
  --serif: "Cormorant", Georgia, serif; --titulo: "Cinzel", Georgia, serif; --sans: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--texto); background: var(--crema); }
a { color: var(--principal); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
p { margin: 0 0 .8em; }
.centro { text-align: center; display: block; }
.suave { color: var(--suave); }
.meta { color: var(--suave); font-size: .9rem; margin: .2em 0; }
p.meta { display: block; }
.meta .ico-xs { vertical-align: -3px; margin-right: .25em; }
.vacio { color: var(--suave); text-align: center; padding: 1.2em; font-style: italic; }
.frase { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--principal); margin: .1em 0 .5em; }
.frase.grande { font-size: 1.45rem; }
.claro { color: #fff; }
.claro-suave { color: #e8dcef; }

/* ---------- cinta de demo y avisos */
.cinta-demo { background: var(--dorado-claro); color: var(--oscuro); text-align: center; font-size: .8rem; font-weight: 700; padding: 4px; letter-spacing: .04em; }
.avisos { margin-bottom: 1em; }
.aviso { padding: .8em 1em; border-radius: 12px; margin: 0 0 .7em; font-weight: 500; }
.aviso-ok { background: #e6f4ec; color: #1f5a40; }
.aviso-error { background: #fbe9eb; color: #7d2430; }
.aviso-info { background: #f1eaf7; color: var(--oscuro); }
.aviso-grande { font-size: 1.05rem; }

/* ---------- logo */
.logo { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; }
.logo-iso, .logo-img { width: 46px; height: 46px; object-fit: contain; }
.logo-sm .logo-iso, .logo-sm .logo-img { width: 36px; height: 36px; }
.logo-txt { display: flex; flex-direction: column; }
.logo-nombre { font-family: var(--titulo); font-weight: 600; letter-spacing: .14em; font-size: 1.25rem; color: var(--oscuro); text-transform: uppercase; }
.logo-lema { font-family: var(--serif); font-style: italic; color: var(--dorado); font-size: 1rem; }
.logo-claro .logo-nombre { background: linear-gradient(180deg, var(--dorado-claro), var(--dorado)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-claro .logo-lema { color: #e8dcef; }

/* ---------- botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: .7em 1.4em; border-radius: 999px;
  font: 600 1rem var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-principal { background: var(--principal); color: #fff; box-shadow: 0 6px 16px rgba(123, 79, 160, .28); }
.btn-dorado { background: linear-gradient(180deg, var(--dorado-claro), var(--dorado)); color: var(--oscuro); box-shadow: 0 6px 20px rgba(201, 162, 74, .35); }
.btn-borde { background: transparent; color: var(--principal); border-color: var(--principal); }
.btn-borde-claro { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(240, 207, 124, .7); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-texto { background: none; border: 0; color: var(--suave); text-decoration: underline; cursor: pointer; font: inherit; padding: .4em; min-height: 40px; }
.btn-chico { min-height: 40px; padding: .45em 1em; font-size: .92rem; }
.btn-ancho { width: 100%; }
.btn-hora { background: #fff; border: 2px solid var(--borde); color: var(--oscuro); min-width: 88px; font-size: 1.05rem; }
.btn-hora:hover { border-color: var(--principal); }
.ico { width: 30px; height: 30px; }
.ico-xs { width: 18px; height: 18px; flex: none; }
.ico-wa { width: 26px; height: 26px; }

/* ---------- landing: hero */
.hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 18px 16px 64px;
  background: radial-gradient(ellipse at 50% 18%, var(--principal) 0%, var(--oscuro) 62%, #1f0f2b 100%); }
.hero-luz { position: absolute; inset: -30% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(240, 207, 124, .30), transparent 45%); }
.hero-nav { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: .3em 1.2em; font-size: .92rem; }
.hero-nav a { color: #eadff2; text-decoration: none; padding: .4em .2em; }
.hero-nav-app { border: 1px solid rgba(240, 207, 124, .6); border-radius: 999px; padding: .35em 1em !important; }
.hero-centro { position: relative; max-width: 720px; margin: 28px auto 0; }
.hero-iso { width: 150px; height: 150px; filter: drop-shadow(0 0 30px rgba(240, 207, 124, .35)); }
.hero-nombre { font-family: var(--titulo); font-weight: 600; letter-spacing: .2em; font-size: clamp(2.6rem, 11vw, 4.6rem); margin: .1em 0 0; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3cf, var(--dorado-claro) 45%, var(--dorado)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lema { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 5.5vw, 2rem); color: #f3e7c8; margin: 0 0 .6em; }
.hero-texto { color: #e5d8ee; font-size: 1.08rem; max-width: 34em; margin: 0 auto 1.4em; }
.hero-botones { display: flex; flex-direction: column; gap: .7em; align-items: stretch; max-width: 360px; margin: 0 auto; }
.hero-zona { margin-top: 1.4em; color: #d9c8e5; display: inline-flex; gap: .4em; align-items: center; }

/* ---------- landing: secciones */
.seccion { padding: 56px 16px; max-width: 1080px; margin: 0 auto; }
.seccion-lavanda { max-width: none; background: linear-gradient(180deg, #f3eaf6, var(--crema)); }
.seccion-lavanda > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.seccion-oscura { max-width: none; background: var(--oscuro); color: #fff; text-align: center; }
.antetitulo { text-align: center; text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; color: var(--dorado); font-weight: 700; margin-bottom: .3em; }
.titulo-sec { font-family: var(--titulo); font-weight: 600; letter-spacing: .06em; color: var(--oscuro); text-align: center; font-size: clamp(1.6rem, 6vw, 2.3rem); }
.titulo-sec.claro { color: var(--dorado-claro); }
.grilla-servicios { display: grid; gap: 16px; margin-top: 28px; }
.tarjeta-servicio { background: radial-gradient(circle at 50% 0%, #fffaf2, #f4ecf6 85%); border-radius: var(--radio); padding: 26px 20px; text-align: center;
  box-shadow: 0 0 0 1px rgba(201, 162, 74, .35), var(--sombra); display: flex; flex-direction: column; align-items: center; gap: .3em; }
.tarjeta-servicio h3 { font-family: var(--titulo); letter-spacing: .08em; color: var(--oscuro); font-size: 1.15rem; margin-top: .4em; }
.tarjeta-servicio .btn { margin-top: .6em; }
.servicio-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--dorado);
  background: radial-gradient(circle, #fff6dc, #f6e9c6); box-shadow: 0 0 0 1px rgba(201, 162, 74, .5); }
.servicio-ico .ico { width: 34px; height: 34px; }
.servicio-ico.chico { width: 48px; height: 48px; flex: none; }
.servicio-ico.chico .ico { width: 26px; height: 26px; }
.precio { display: flex; flex-direction: column; line-height: 1.25; color: var(--oscuro); }
.precio strong { font-size: 1.1rem; }
.precio small { color: var(--suave); font-size: .82rem; }
.tarjeta-servicio .precio { align-items: center; }

.lista-eventos { display: grid; gap: 18px; margin-top: 26px; }
.tarjeta-evento { display: flex; gap: 16px; background: #fff; border-radius: var(--radio); padding: 20px; box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.tarjeta-evento.destacado { box-shadow: 0 0 0 2px var(--dorado), 0 14px 34px rgba(201, 162, 74, .22); background: linear-gradient(180deg, #fffaf0, #fff); }
.tarjeta-evento h3 { font-family: var(--titulo); color: var(--oscuro); letter-spacing: .06em; font-size: 1.3rem; }
.evento-cuerpo { flex: 1; min-width: 0; }
.fecha-medalla { flex: none; width: 64px; height: 72px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--principal), var(--oscuro)); color: #fff; box-shadow: inset 0 0 0 1px rgba(240, 207, 124, .5); }
.fecha-medalla .dia { font-family: var(--titulo); font-size: 1.7rem; line-height: 1; }
.fecha-medalla .mes { text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; color: var(--dorado-claro); }
.etiqueta-dorada { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #7a5a14;
  background: #fbefcf; border-radius: 999px; padding: .2em .8em; margin-bottom: .4em; }
.chips-horarios { list-style: none; padding: 0; margin: .8em 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border-radius: 12px; padding: .4em .8em; background: #f4ecf6; color: var(--oscuro); font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.chip small { font-weight: 500; color: var(--suave); font-size: .78rem; }
.chip-pocos { background: #fbefcf; }
.chip-pocos small { color: #7a5a14; }
.chip-lleno { background: #eee9ef; color: #8b7f90; }
.evento-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: .6em; }

.grilla-facilitadoras { display: grid; gap: 18px; margin-top: 26px; }
.tarjeta-facilitadora { text-align: center; padding: 22px; }
.avatar { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #efe2f2, #d9c3e6); box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px var(--dorado); }
.avatar span { font-family: var(--titulo); font-size: 2.8rem; color: var(--principal); }
.tarjeta-facilitadora h3 { font-family: var(--titulo); letter-spacing: .08em; color: var(--oscuro); }
.botones-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.2em; }

.pie { text-align: center; padding: 22px 16px 90px; font-size: .88rem; color: var(--suave); }
.pie a { color: var(--suave); }
.hecho { white-space: nowrap; }
.wa-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: .4em; background: #25d366; color: #fff;
  border-radius: 999px; padding: .7em 1.1em; text-decoration: none; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }

/* ---------- cajas centradas (entrar, demo, error) */
.fondo-crema { background: var(--crema); }
.fondo-oscuro { background: radial-gradient(ellipse at 50% 0%, var(--principal), var(--oscuro) 60%, #1f0f2b); min-height: 100vh; }
.caja-centro { max-width: 420px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.caja-vidrio { margin-top: 6vh; background: rgba(255, 255, 255, .07); border: 1px solid rgba(240, 207, 124, .35); border-radius: 26px; backdrop-filter: blur(8px); padding: 34px 22px; }
.caja-texto { max-width: 680px; margin: 0 auto; padding: 32px 16px; }
.botones-columna { display: flex; flex-direction: column; gap: 10px; margin: 1em 0; }
.botones-columna form { margin: 0; }

/* ---------- app de la clienta (celular) */
.app { background: var(--crema); padding-bottom: 84px; }
.app-barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  background: linear-gradient(90deg, var(--oscuro), color-mix(in srgb, var(--oscuro) 75%, var(--principal))); color: #fff; }
.app-barra a { text-decoration: none; }
.app-hola { font-size: .92rem; color: #eadff2; }
.app-entrar { color: var(--dorado-claro) !important; font-weight: 700; }
.app-main { max-width: 560px; margin: 0 auto; padding: 18px 16px; }
.app-titulo { font-family: var(--titulo); font-weight: 600; color: var(--oscuro); letter-spacing: .05em; font-size: 1.35rem; margin: .6em 0 .7em; }
.app-titulo-grande { font-family: var(--titulo); color: var(--oscuro); letter-spacing: .05em; font-size: 1.7rem; }
.app-sub { font-family: var(--titulo); color: var(--oscuro); font-size: 1.1rem; letter-spacing: .05em; margin: 1.4em 0 .6em; }
.tarjeta-app { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--radio); padding: 14px; margin-bottom: 12px;
  text-decoration: none; color: inherit; box-shadow: 0 0 0 1px var(--borde), 0 6px 18px rgba(59, 31, 79, .06); }
.tarjeta-app h2 { font-size: 1.12rem; color: var(--oscuro); margin: 0; font-family: var(--titulo); letter-spacing: .04em; }
.tarjeta-app .frase { font-size: 1.05rem; margin: 0; }
.tarjeta-app-cuerpo { flex: 1; min-width: 0; }
.flecha { font-size: 2rem; color: var(--dorado); }
.volver { display: inline-block; margin-bottom: .6em; text-decoration: none; font-weight: 600; }
.ficha { background: #fff; border-radius: var(--radio); padding: 20px; box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.ficha h2 { font-family: var(--titulo); color: var(--oscuro); font-size: 1.2rem; letter-spacing: .04em; }
.lista-horarios { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.horario { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 0 0 1px var(--borde); }
.horario div { display: flex; flex-direction: column; }
.horario.lleno { background: #f6f2f7; }
.hora-grande { font-family: var(--titulo); font-size: 1.6rem; color: var(--principal); line-height: 1.1; }
.dia-bloque { margin-bottom: 1.1em; }
.dia-bloque h3 { font-size: 1rem; color: var(--oscuro); }
.botones-hora { display: flex; flex-wrap: wrap; gap: 8px; }
.form-app { display: flex; flex-direction: column; gap: 14px; margin: 1em 0; }
.form-app label, .form-panel label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--oscuro); }
.form-app label.claro { color: #f1e6f6; }
input, select, textarea { font: 400 1rem var(--sans); padding: .75em .9em; border: 1.5px solid var(--borde); border-radius: 12px; background: #fff; color: var(--texto); min-height: 48px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--principal) 30%, transparent); border-color: var(--principal); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: var(--principal); }
input[type=color] { padding: 4px; height: 48px; }
label.check { flex-direction: row !important; align-items: center; font-weight: 500 !important; }
.opciones { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.opciones legend { font-weight: 700; color: var(--oscuro); margin-bottom: 6px; }
.opcion { flex-direction: row !important; align-items: center; gap: 12px !important; background: #fff; border: 2px solid var(--borde); border-radius: 14px; padding: 14px; font-weight: 600; }
.opcion:has(input:checked) { border-color: var(--principal); background: #f7f0fb; }
.politica { font-size: .88rem; color: var(--suave); background: #fff; border-left: 3px solid var(--dorado); padding: .6em .9em; border-radius: 8px; }
.reserva-tarjeta { background: #fff; border-radius: var(--radio); padding: 16px; margin-bottom: 14px; box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
.reserva-tarjeta h2 { font-family: var(--titulo); color: var(--oscuro); font-size: 1.15rem; margin: .4em 0 .2em; letter-spacing: .03em; }
.reserva-tarjeta.estado-espera { background: #fbf8fc; }
.reserva-cabeza { display: flex; flex-wrap: wrap; gap: 6px; }
.reserva-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: .7em; }
.reserva-acciones form { margin: 0; }
.sello { display: inline-block; border-radius: 999px; font-size: .78rem; font-weight: 700; padding: .25em .8em; background: #f1eaf7; color: var(--oscuro); }
.sello-chico { font-size: .7rem; padding: .1em .6em; }
.sello-reservada { background: #e6f4ec; color: #1f5a40; }
.sello-espera { background: #fbefcf; color: #7a5a14; }
.sello-pago-pagado { background: #e6f4ec; color: #1f5a40; }
.sello-pago-sena { background: #fbefcf; color: #7a5a14; }
.sello-pago-sin_pago { background: #f3eef4; color: #6f6177; }
.sello-pago-a_devolver { background: #fbe9eb; color: #7d2430; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { display: flex; justify-content: space-between; gap: 10px; padding: .6em 0; border-bottom: 1px solid var(--borde); }
.monto-grande { font-family: var(--titulo); font-size: 2.4rem; color: var(--oscuro); margin: .1em 0; }
.app-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; display: flex; justify-content: space-around; background: #fff;
  box-shadow: 0 -4px 18px rgba(59, 31, 79, .10); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.app-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; text-decoration: none; color: var(--suave); padding: 4px 10px; min-width: 76px; }
.app-nav a.activo { color: var(--principal); font-weight: 700; }
.app-nav .ico { width: 26px; height: 26px; }
.app .pie { padding-bottom: 20px; }

/* ---------- panel (PC) */
.panel { background: #f7f2f8; }
.panel-marco { display: flex; flex-direction: column; min-height: 100vh; }
.panel-lateral { background: linear-gradient(180deg, var(--oscuro), #22102f); color: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.panel-logo { text-decoration: none; }
.panel-lateral nav { display: flex; flex-wrap: wrap; gap: 4px; }
.panel-lateral nav a { color: #e3d4ec; text-decoration: none; padding: .5em .9em; border-radius: 10px; font-weight: 600; font-size: .95rem; }
.panel-lateral nav a:hover { background: rgba(255, 255, 255, .07); }
.panel-lateral nav a.activo { background: rgba(240, 207, 124, .16); color: var(--dorado-claro); }
.panel-usuario { display: flex; flex-wrap: wrap; gap: .3em .8em; align-items: center; font-size: .9rem; color: #e3d4ec; }
.panel-usuario small { color: var(--dorado-claro); }
.panel-usuario a, .panel-usuario .btn-texto { color: #cdb8da; }
.panel-main { flex: 1; padding: 22px 16px 40px; max-width: 1200px; width: 100%; }
.panel-titulo { font-family: var(--titulo); color: var(--oscuro); letter-spacing: .04em; font-size: 1.6rem; margin: 0; }
.panel-sub { font-family: var(--titulo); color: var(--oscuro); font-size: 1.05rem; letter-spacing: .04em; margin: 1.5em 0 .6em; }
.tarjeta-panel .panel-sub:first-child { margin-top: 0; }
.fila-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .4em; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.en-linea { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.en-linea input, .en-linea select { width: auto; min-height: 40px; padding: .4em .6em; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 1em 0; }
.metrica { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 0 0 1px var(--borde); display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--suave); }
.metrica .num { font-family: var(--titulo); font-size: 1.7rem; color: var(--oscuro); }
.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--borde); font-size: .95rem; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); background: #fbf8fc; padding: .7em .9em; }
.tabla td { padding: .7em .9em; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla tr.presente td { background: #f1faf5; }
.tabla tr.apagada td { opacity: .55; }
.tabla form { margin: 0; }
.cobrar { margin-top: 6px !important; }
.barra { display: flex; align-items: center; gap: 8px; }
.barra progress { width: 110px; height: 10px; accent-color: var(--principal); }
.agenda-lista { display: grid; gap: 10px; }
.agenda-item { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px var(--borde); border-left: 5px solid var(--principal); }
.agenda-item.individual { border-left-color: var(--dorado); }
.agenda-hora { font-family: var(--titulo); font-size: 1.4rem; color: var(--principal); min-width: 72px; }
.agenda-que { flex: 1; display: flex; flex-direction: column; }
.agenda-que small { color: var(--suave); }
.agenda-cupo { font-weight: 700; color: var(--oscuro); }
.lista-espera li { padding: .3em 0; }
.tarjeta-panel { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 0 0 1px var(--borde); margin-top: 16px; }
.form-panel { display: flex; flex-direction: column; gap: 12px; }
.fila-campos { display: grid; gap: 12px; }
.dos-columnas { display: grid; gap: 16px; }
.grilla-tarjetas { display: grid; gap: 14px; }
.angosto { max-width: 460px; }
.vista-marca { background: var(--oscuro); border-radius: 16px; padding: 18px; display: inline-block; margin: .6em 0; }
.clave-mostrar { font-family: ui-monospace, monospace; font-size: 1.8rem; letter-spacing: .12em; background: #fbf8fc; border: 2px dashed var(--dorado); border-radius: 12px; padding: .5em; text-align: center; }

@media (min-width: 720px) {
  .hero { padding: 22px 24px 90px; }
  .hero-botones { flex-direction: row; justify-content: center; max-width: none; }
  .grilla-servicios { grid-template-columns: repeat(2, 1fr); }
  .grilla-facilitadoras { grid-template-columns: repeat(2, 1fr); }
  .lista-eventos { grid-template-columns: 1fr; }
  .fila-campos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (min-width: 1000px) {
  .grilla-servicios { grid-template-columns: repeat(4, 1fr); }
  .lista-eventos { grid-template-columns: repeat(2, 1fr); }
  .panel-marco { flex-direction: row; background: linear-gradient(90deg, #2c173b 240px, transparent 240px); }
  .panel-lateral { width: 240px; flex: none; min-height: 100vh; position: sticky; top: 0; height: 100vh; padding: 22px 16px; }
  .panel-lateral nav { flex-direction: column; flex-wrap: nowrap; }
  .panel-usuario { margin-top: auto; flex-direction: column; align-items: flex-start; }
  .panel-main { padding: 32px 36px 60px; }
  .dos-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
  .dos-columnas.ancha-izq { grid-template-columns: 1.3fr 1fr; }
  .dos-columnas > .tarjeta-panel, .dos-columnas > form.tarjeta-panel { margin-top: 0; }
  .grilla-tarjetas { grid-template-columns: repeat(3, 1fr); }
}