:root {
  --fondo: #f7f5f0;
  --card: #ffffff;
  --texto: #1c2733;
  --suave: #5a6573;
  --linea: #e7e2d7;
  --acento: #1b7a6c;
  --acento-oscuro: #125a4f;
  --acento-claro: #e2f2ee;
  --menta: #bfe6dc;
  --calido: #f4a259;
  --calido-claro: #fdeedd;
  --coral: #ee7b6a;
  --error: #b3261e;
  --error-claro: #fdecea;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(28, 39, 51, 0.04), 0 8px 24px -12px rgba(28, 39, 51, 0.12);
  --sombra-alta: 0 2px 4px rgba(28, 39, 51, 0.05), 0 18px 40px -16px rgba(28, 39, 51, 0.22);
  --titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --cuerpo: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16.5px/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titulos); font-weight: 650; letter-spacing: -0.015em; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 56px; padding-bottom: 72px; }

[hidden] { display: none !important; }

/* ---------- Barra de progreso ---------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 20;
  background: rgba(27, 122, 108, 0.12);
}
.progreso span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acento), var(--calido));
  border-radius: 0 4px 4px 0;
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 162, 89, 0.28), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(191, 230, 220, 0.9), transparent 60%),
    linear-gradient(160deg, #e9f5f1 0%, #f7f5f0 100%);
  border-bottom: 1px solid var(--linea);
}
.hero-inner { position: relative; padding-top: 72px; padding-bottom: 64px; animation: subir 0.7s ease both; }
.hero-deco { position: absolute; inset: 0; pointer-events: none; }
.burbuja { position: absolute; border-radius: 50%; filter: blur(0.5px); }
.b1 { width: 260px; height: 260px; right: -70px; top: -60px; background: radial-gradient(circle at 30% 30%, #fff6, var(--menta)); opacity: .7; animation: flotar 9s ease-in-out infinite; }
.b2 { width: 90px; height: 90px; right: 18%; bottom: 36px; background: var(--calido-claro); border: 10px solid #fff8; animation: flotar 7s ease-in-out -2s infinite; }
.b3 { width: 38px; height: 38px; left: 6%; top: 34px; background: var(--coral); opacity: .35; animation: flotar 6s ease-in-out -4s infinite; }

.eyebrow {
  display: inline-block;
  margin: 0 0 18px; padding: 6px 12px;
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
  color: var(--acento-oscuro);
  background: #ffffffb3; border: 1px solid #ffffff; border-radius: 999px;
  backdrop-filter: blur(6px);
}
h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.07; margin: 0 0 18px; }
h1 em { font-style: italic; color: var(--acento); font-weight: 500; }
.lead { font-size: 1.12rem; color: #3f4a57; margin: 0 0 24px; max-width: 58ch; }

.formato { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.formato li {
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 15px; font-size: 0.92rem; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.formato strong { color: var(--acento); font-size: 1.02rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--acento) 0%, #23927f 100%);
  color: #fff; border: 0; border-radius: 12px;
  padding: 11px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(27, 122, 108, 0.6);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(27, 122, 108, 0.65); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--calido); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-grande { padding: 16px 32px; font-size: 1.08rem; border-radius: 14px; }
.btn-claro { background: var(--texto); box-shadow: 0 6px 16px -8px rgba(28,39,51,.5); }

/* ---------- Secciones ---------- */
.kicker {
  margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--calido);
}
.curso h2, .empezar h2 { font-size: clamp(1.7rem, 4.5vw, 2.2rem); line-height: 1.15; margin: 0 0 12px; }
.curso { margin: 0 0 64px; }
.objetivo { margin: 0 0 28px; max-width: 60ch; font-size: 1.08rem; color: #3f4a57; }
.objetivo strong { color: var(--texto); background: linear-gradient(transparent 62%, var(--calido-claro) 62%); }

.recorrido {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.recorrido li {
  position: relative;
  background: var(--card); border: 1px solid var(--linea); border-radius: 14px;
  padding: 14px 14px 12px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 2px;
}
.recorrido li:not(:last-child)::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--menta); border-right: 2px solid var(--menta);
  transform: translateY(-50%) rotate(45deg); z-index: 1;
}
.paso-n {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700; margin-bottom: 6px;
  background: var(--acento-claro); color: var(--acento-oscuro);
}
.recorrido li:nth-child(2) .paso-n { background: #e5eefb; color: #2f5f9e; }
.recorrido li:nth-child(3) .paso-n { background: var(--calido-claro); color: #a55a14; }
.recorrido li:nth-child(4) .paso-n { background: #fde6e2; color: #b2483a; }
.recorrido strong { font-size: 0.98rem; line-height: 1.25; }
.recorrido small { color: var(--suave); font-size: 0.82rem; line-height: 1.35; }

/* Encuentros como línea de tiempo */
.encuentros { position: relative; display: grid; gap: 12px; margin-bottom: 32px; }
.encuentros::before {
  content: ""; position: absolute; left: 36px; top: 30px; bottom: 30px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--menta) 0 6px, transparent 6px 12px);
}
.encuentro {
  position: relative;
  background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); transition: box-shadow .2s, border-color .2s, transform .2s;
}
.encuentro:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.encuentro[open] { border-color: var(--menta); box-shadow: var(--sombra-alta); }
.encuentro summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 16px 20px 16px 16px; border-radius: var(--radio);
}
.encuentro summary::-webkit-details-marker { display: none; }
.encuentro summary::after {
  content: ""; margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6573' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .25s, background-color .2s;
}
.encuentro[open] summary::after { transform: rotate(180deg); background-color: var(--acento-claro); }
.encuentro summary:focus-visible { outline: 3px solid var(--calido); outline-offset: 2px; }
.enc-num {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--titulos); font-size: 1.25rem; font-weight: 650;
  background: linear-gradient(135deg, var(--acento), #2aa28c); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(27,122,108,.6);
}
.encuentro:nth-child(2) .enc-num { background: linear-gradient(135deg, #2f6fb0, #4b8fd1); box-shadow: 0 6px 14px -6px rgba(47,111,176,.6); }
.encuentro:nth-child(3) .enc-num { background: linear-gradient(135deg, #d9822b, var(--calido)); box-shadow: 0 6px 14px -6px rgba(217,130,43,.6); }
.encuentro:nth-child(4) .enc-num { background: linear-gradient(135deg, #cf5a4a, var(--coral)); box-shadow: 0 6px 14px -6px rgba(207,90,74,.6); }
.enc-txt { display: flex; flex-direction: column; gap: 1px; }
.enc-txt strong { font-size: 1.04rem; line-height: 1.3; }
.enc-txt small { color: var(--suave); font-size: 0.86rem; }
.enc-detalle { padding: 0 22px 18px 74px; font-size: 0.96rem; color: #3f4a57; animation: aparecer .3s ease both; }
.enc-detalle p { margin: 0 0 10px; }
.enc-detalle b { color: var(--texto); }

.ejes {
  background: linear-gradient(135deg, #fff 0%, var(--calido-claro) 140%);
  border: 1px solid #f3dfc6; border-radius: var(--radio); padding: 24px 26px;
}
.ejes h3 { font-size: 1.2rem; margin: 0 0 14px; }
.ejes ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 22px; }
.ejes li { position: relative; padding-left: 28px; line-height: 1.4; }
.ejes li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--calido) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.nota { color: var(--suave); font-size: 0.93rem; margin: 0; padding-top: 16px; border-top: 1px dashed #efd3b2; }

/* ---------- Formulario ---------- */
.empezar { margin-bottom: 22px; }
.tiempo { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 0.93rem; margin: 0; }
.tiempo::before { content: "⏱"; }

.card {
  background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 28px; margin: 0 0 18px; box-shadow: var(--sombra);
}

fieldset.pregunta { min-width: 0; transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden; }
fieldset.pregunta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--linea); transition: background .3s;
}
fieldset.pregunta.respondida::before { background: linear-gradient(var(--acento), #2aa28c); }
fieldset.pregunta legend { padding: 0; float: left; width: 100%; }
fieldset.pregunta legend + * { clear: both; }
.num-preg {
  display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acento-oscuro); background: var(--acento-claro); padding: 3px 10px; border-radius: 999px; margin: 0 0 10px;
}
.titulo { display: block; font-family: var(--titulos); font-size: 1.28rem; font-weight: 600; line-height: 1.3; margin: 0 0 6px; letter-spacing: -0.01em; }
.ayuda { color: var(--suave); font-size: 0.92rem; margin: 0 0 18px; }

.opciones { display: grid; gap: 10px; }
.opcion {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 16px; border: 1.5px solid var(--linea); border-radius: 12px; cursor: pointer;
  background: #fff; transition: background .15s, border-color .15s, transform .1s;
}
.opcion:hover { border-color: var(--menta); background: #fbfdfc; }
.opcion:active { transform: scale(0.995); }
.opcion input {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex-shrink: 0;
  width: 20px; height: 20px; border: 2px solid #c5ccd3; background: #fff; display: grid; place-items: center;
  transition: background .15s, border-color .15s; cursor: pointer;
}
.opcion input[type="checkbox"] { border-radius: 6px; }
.opcion input[type="radio"] { border-radius: 50%; }
.opcion input::after { content: ""; transform: scale(0); transition: transform .15s cubic-bezier(.3,1.6,.6,1); }
.opcion input[type="checkbox"]::after {
  width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opcion input[type="radio"]::after { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.opcion input:checked { background: var(--acento); border-color: var(--acento); }
.opcion input:checked::after { transform: scale(1); }
.opcion:has(input:checked) { background: var(--acento-claro); border-color: var(--acento); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--calido); outline-offset: 2px; }

.campo { display: block; }
.etiqueta { display: block; font-weight: 700; margin-bottom: 10px; }
.etiqueta em { font-weight: 400; color: var(--suave); font-style: normal; }

input[type="text"], textarea {
  width: 100%; font: inherit; color: inherit;
  padding: 13px 16px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fcfbf8;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type="text"]::placeholder, textarea::placeholder { color: #9aa3ad; }
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--acento); background: #fff; box-shadow: 0 0 0 4px var(--acento-claro); }
textarea { resize: vertical; min-height: 120px; }
.otro-texto { margin-top: 2px; animation: aparecer .2s ease both; }

.pregunta.invalida { border-color: var(--error); box-shadow: 0 0 0 4px var(--error-claro); animation: sacudir .35s ease; }
.pregunta.invalida::before { background: var(--error); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.enviar {
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px;
  padding: 32px 24px; border-radius: var(--radio); text-align: center;
  background: linear-gradient(135deg, var(--acento-claro), #fff 70%);
  border: 1px solid var(--menta);
}
.error { color: var(--error); background: var(--error-claro); padding: 10px 16px; border-radius: 10px; margin: 0; font-weight: 600; }

.gracias { text-align: center; padding: 56px 28px; outline: none; animation: subir .5s ease both; }
.gracias h2 { font-size: 2rem; margin: 18px 0 8px; }
.gracias p { color: var(--suave); margin: 0 auto; max-width: 42ch; }
.check {
  width: 76px; height: 76px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--acento), #2aa28c); color: #fff;
  display: grid; place-items: center; font-size: 2.2rem; font-weight: 700;
  box-shadow: 0 0 0 10px var(--acento-claro), 0 12px 28px -10px rgba(27,122,108,.6);
  animation: pop .5s cubic-bezier(.3,1.6,.6,1) .15s both;
}

.pie { margin-top: 40px; color: var(--suave); font-size: 0.86rem; text-align: center; }

/* ---------- Animaciones ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sacudir { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Panel de resultados ---------- */
.admin .wrap { max-width: 960px; }
.admin .hero-inner { padding-top: 48px; padding-bottom: 40px; }
.admin .card h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.admin main.wrap { padding-top: 12px; }
.acciones-hero { display: flex; flex-wrap: wrap; gap: 10px; }
.seccion { font-size: 1.55rem; margin: 44px 0 14px; scroll-margin-top: 70px; }

.subnav {
  position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; overflow-x: auto;
  padding-block: 10px; background: rgba(247, 245, 240, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.subnav a {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  color: var(--suave); font-weight: 600; font-size: 0.9rem;
}
.subnav a:hover { background: var(--acento-claro); color: var(--acento-oscuro); }

.aviso {
  margin: 24px 0 0; padding: 12px 16px; border-radius: 12px; font-weight: 600;
  background: var(--acento-claro); color: var(--acento-oscuro); border: 1px solid var(--menta);
}

/* Indicadores */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px;
}
.tile-num { font-family: var(--titulos); font-size: 2.3rem; font-weight: 650; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.tile-num small { font-size: 1rem; color: var(--suave); font-weight: 500; margin-left: 2px; }
.tile-lbl { color: var(--suave); font-size: 0.88rem; line-height: 1.35; }

.conclusiones { border-left: 4px solid var(--calido); }
.conclusiones ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.conclusiones li { position: relative; padding-left: 22px; line-height: 1.5; }
.conclusiones li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--calido); }
.dato { font-weight: 700; color: var(--acento-oscuro); font-variant-numeric: tabular-nums; }
.admin .ayuda { margin: 0 0 14px; }

/* Barras */
.barras { width: 100%; border-collapse: collapse; }
.barras td { padding: 9px 0; vertical-align: middle; border-top: 1px solid var(--linea); }
.barras tr:first-child td { border-top: 0; }
.barras tr:hover td { background: #fafcfb; }
.barras .op { width: 46%; padding-right: 18px; font-size: 0.95rem; }
.barras .bar span { display: block; height: 14px; min-width: 3px; background: var(--acento); border-radius: 0 4px 4px 0; }
.barras .num { width: 84px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras .num small { display: inline-block; width: 42px; margin-left: 6px; color: var(--suave); font-weight: 400; font-size: 0.85rem; }

.nivel {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; margin-right: 6px; background: var(--acento-claro); color: var(--acento-oscuro);
}
.nivel.n1 { background: #eef0f2; color: #4a5561; }
.nivel.n2 { background: #d9efe9; color: #1f6b5f; }
.nivel.n3 { background: #b5e0d5; color: #145247; }
.nivel.n4 { background: #4fa593; color: #fff; }
.nivel.n5 { background: #125a4f; color: #fff; }
.enc-mini {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-right: 6px;
  font-size: 0.76rem; font-weight: 700; color: #fff; background: var(--acento);
}
.enc-mini.e2 { background: #2f6fb0; }
.enc-mini.e3 { background: #d9822b; }
.enc-mini.e4 { background: #cf5a4a; }

/* Cruce (mapa de calor, un solo tono) */
.tabla-scroll { overflow-x: auto; }
.cruce { width: 100%; border-collapse: separate; border-spacing: 2px; min-width: 520px; }
.cruce th { font-size: 0.85rem; text-align: center; padding: 6px 4px 10px; vertical-align: bottom; width: 17%; }
.cruce th small { display: block; font-weight: 400; color: var(--suave); font-size: 0.76rem; }
.cruce .op { font-size: 0.92rem; padding: 8px 12px 8px 0; }
.celda {
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem;
  border-radius: 6px; padding: 10px 4px; color: var(--texto);
}
.celda.oscura { color: #fff; }
.celda.vacia { color: var(--suave); font-weight: 400; background: var(--fondo); }

.citas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.citas li { background: var(--fondo); border-left: 3px solid var(--calido); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.citas cite { display: block; margin-top: 4px; font-style: normal; font-size: 0.82rem; color: var(--suave); }
.card h4 { margin: 20px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }

/* Respuestas por persona */
.card.personas { padding: 0; overflow: hidden; }
.barra-acciones {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.barra-acciones label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.fila { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 0 20px; }
.fila + .fila { border-top: 1px solid var(--linea); }
.fila > input[type="checkbox"], .barra-acciones input { width: 18px; height: 18px; accent-color: var(--acento); margin: 17px 0 0; cursor: pointer; }
.barra-acciones input { margin: 0; }
.fila > .btn-borrar { margin-top: 10px; }
.persona summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 0;
}
.persona summary::-webkit-details-marker { display: none; }
.persona summary::before { content: "▸"; color: var(--acento); transition: transform .2s; }
.persona[open] summary::before { transform: rotate(90deg); }
.persona summary:hover strong { color: var(--acento-oscuro); }
.persona .cuando { margin-left: auto; color: var(--suave); font-size: 0.86rem; white-space: nowrap; }
.persona-detalle { padding: 2px 0 18px 20px; }
.resp { margin-bottom: 14px; }
.resp-preg { margin: 0 0 4px; font-weight: 700; font-size: 0.92rem; }
.resp ul { margin: 0; padding-left: 18px; color: #3f4a57; }
.btn-borrar {
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  color: var(--error); background: #fff; border: 1.5px solid #f1c4c0; border-radius: 10px; padding: 6px 12px;
}
.btn-borrar:hover:not(:disabled) { background: var(--error-claro); }
.btn-borrar:disabled { opacity: .45; cursor: default; }
.vacio { color: var(--suave); }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  .recorrido { grid-template-columns: repeat(2, 1fr); }
  .recorrido li:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero-inner { padding-top: 48px; padding-bottom: 44px; }
  main.wrap { padding-top: 40px; }
  .card { padding: 20px 18px; }
  .ejes { padding: 20px; }
  .encuentros::before { left: 34px; }
  .encuentro summary { padding: 14px 14px 14px 12px; gap: 12px; }
  .enc-detalle { padding: 0 16px 16px 16px; }
  .b1 { width: 180px; height: 180px; }
  .b2 { display: none; }
  .barras .op { width: 60%; }
}