/* ORBE · identidad visual adaptada a web: Paper, Arena, Grafito, un solo acento Terracota; Fraunces para titulares, sistema para texto. */
:root {
  --paper: #FBF8F2; --arena: #E2D6BC; --arena-l: #F1EADB; --arena-d: #CDBF9F;
  --graf: #2B2D31; --graf-2: #3A3D44; --terra: #B8402E; --petrol: #24505C; --muted: #5C636B; --line: #D9D2C3;
  --display: "Fraunces", Georgia, serif; --body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --radius: 14px; --shadow: 0 10px 30px rgba(43, 45, 49, 0.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--graf); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; padding-top: calc(14px + env(safe-area-inset-top)); }
.brand img { height: 30px; display: block; }
nav a { margin-left: 18px; font-size: 14px; color: var(--muted); }
nav a.active { color: var(--graf); border-bottom: 2px solid var(--terra); padding-bottom: 2px; }
main { max-width: 1080px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(16px, 4vw, 40px) 80px; }
.view[hidden] { display: none; }
.h-display { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 18px; }
h3 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 28px 0 10px; }
.hero { max-width: 640px; margin: 8vh auto 0; text-align: left; }
.hero-symbol { width: 64px; margin-bottom: 18px; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; margin: 0 0 14px; }
.lead { font-size: 18px; color: var(--graf-2); margin: 0 0 26px; }
.fine { font-size: 13px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; margin: 0 10px 10px 0; }
.btn.primary { background: var(--graf); color: var(--paper); }
.btn.primary:hover { background: var(--graf-2); }
.btn.secondary { background: var(--arena); color: var(--graf); }
.btn.ghost { background: transparent; color: var(--graf); border-color: var(--line); }
.btn.danger { background: transparent; color: var(--terra); border-color: var(--terra); }
.btn.file { cursor: pointer; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin: 0 0 16px; }
.card.dark { background: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); border: none; }
.card.dark .card-kicker { color: var(--arena); }
.card.action { display: block; }
.card.action:hover { border-color: var(--arena-d); }
.card-kicker { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); margin-bottom: 6px; }
.card-title { display: block; font-family: var(--display); font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.card-text { display: block; color: inherit; opacity: 0.85; }
figure.card { margin: 0 0 16px; }
figcaption { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
video { width: 100%; border-radius: 8px; background: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--arena-l); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.chip.voz { border-color: var(--arena-d); }
.form label { display: block; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.form select, .form input[type=number], .form input[type=email], .form input[type=password], .form input[type=text], textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--graf); }
.row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.progress { height: 6px; background: var(--arena-l); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.bar { height: 100%; width: 0; background: var(--terra); transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.result-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kpi { padding: 14px 16px; border-left: 0; background: var(--arena-l); border-radius: 12px; }
.kpi b { display: block; font-family: var(--display); font-size: 28px; font-weight: 500; line-height: 1; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.alerta { background: #F6E3DF; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--graf); color: var(--paper); position: sticky; top: 0; }
tr:nth-child(even) td { background: var(--arena-l); }
#informe-cuerpo h4 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 14px 0 6px; color: var(--arena); }
#informe-cuerpo p, #informe-cuerpo li { color: var(--paper); }
#informe-cuerpo .tag { display: inline-block; background: var(--terra); color: var(--paper); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin-right: 6px; }
.hist { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hist b { font-family: var(--display); font-weight: 500; font-size: 18px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; border-top: 1px solid var(--line); }
details summary { cursor: pointer; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ---- personalidad ORBE: editorial, un acento, el arco como motivo ---- */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--graf); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 6px; }
.eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); margin: 0 0 10px; }
.hero { max-width: 720px; margin: 6vh auto 0; }
.hero-orb { width: 96px; margin-bottom: 22px; }
.orb { width: 100%; height: auto; display: block; }
.orb-track { fill: none; stroke: var(--arena); stroke-width: 9; stroke-linecap: round; }
.orb-arc { fill: none; stroke: var(--graf); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 100; }
.orb-arc.draw { animation: dibujar 1400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes dibujar { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }
.orb-drop { fill: var(--terra); }
.orb-pivot { fill: var(--graf); }
.orb-num { font-family: var(--display); font-size: 64px; fill: var(--graf); }
.orb-progreso { width: 120px; flex: none; }
.orb-progreso .orb-arc { stroke: var(--terra); stroke-dasharray: 0 100; transition: stroke-dasharray 250ms linear; }
.proceso-cab { display: flex; gap: 22px; align-items: center; margin: 14px 0 6px; }
.lead-s { font-family: var(--display); font-size: 20px; margin: 0 0 4px; }
.cta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.editorial { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; margin: 10px 0 30px; }
@media (max-width: 720px) { .editorial { grid-template-columns: 1fr; } }
.accion { position: relative; display: block; padding: 28px 28px 30px; background: var(--graf); color: var(--paper); border-radius: 18px; background-image: linear-gradient(180deg, #2F3237, #202226); }
.accion-num { font-family: var(--display); color: var(--arena); font-size: 14px; letter-spacing: 0.1em; }
.accion-titulo { display: block; font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 500; line-height: 1.05; margin: 10px 0 12px; }
.accion-texto { display: block; color: var(--arena); max-width: 40ch; }
.accion-flecha { position: absolute; right: 24px; bottom: 20px; font-size: 28px; color: var(--terra); transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
.accion:hover .accion-flecha, .accion:focus-visible .accion-flecha { transform: translateX(6px); }
.ficha { border-top: 3px solid var(--graf); padding: 18px 0 0; }
.ficha .card-title { font-size: 26px; }
.familias { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; }
.familia h4 { font-family: var(--display); font-weight: 500; font-size: 17px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.familia ul { list-style: none; padding: 0; margin: 0; }
.familia li { padding: 4px 0; font-size: 14px; color: var(--graf-2); }
.familia li.voz::after { content: " · con claves del instructor"; color: var(--muted); font-size: 12px; }
.lectura { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; border-top: 3px solid var(--graf); border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.dato { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.dato b { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1; }
.dato span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.dato em { display: block; font-style: normal; font-size: 14px; margin-top: 8px; color: var(--graf); }
.dato.alerta b { color: var(--terra); }
.fig { margin: 0 0 22px; }
.fig canvas, .fig video { border-radius: 10px; border: 1px solid var(--line); }
.fig figcaption { margin-top: 10px; font-size: 15px; color: var(--graf); max-width: 70ch; }
.fig figcaption strong { font-family: var(--display); font-weight: 500; }
.informe { background: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); border-radius: 18px; padding: 26px 28px; margin: 0 0 18px; }
.informe .eyebrow { color: var(--arena); }
.informe h4 { font-family: var(--display); font-weight: 500; font-size: 21px; margin: 16px 0 6px; color: var(--arena); }
.informe p, .informe li { color: var(--paper); max-width: 70ch; }
.informe .tag { display: inline-block; background: var(--terra); color: var(--paper); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin-right: 6px; }
.btn:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }
.form select:focus, .form input:focus { border-color: var(--graf); outline: 3px solid var(--terra); outline-offset: 2px; }

.consent { margin: 8px 0 18px; display: grid; gap: 10px; max-width: 64ch; }
.consent label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; color: var(--graf-2); align-items: start; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--terra); }
.consent a { text-decoration: underline; }
.legal { max-width: 760px; margin: 0 auto; padding: 30px 20px 80px; }
.legal h3 { margin-top: 26px; }
.legal p, .legal li { max-width: 70ch; }
.foot a { color: var(--muted); text-decoration: underline; margin: 0 4px; }

.onb { max-width: 720px; margin: 0 auto; }
.onb-fig { width: 100%; max-width: 420px; display: block; margin: 0 0 18px; border-radius: 12px; }
.onb-paso p { font-size: 17px; max-width: 60ch; }
.onb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; flex-wrap: wrap; gap: 10px; }
.onb-puntos { display: flex; gap: 8px; }
.pt { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--graf); background: transparent; padding: 0; cursor: pointer; }
.pt.activo { background: var(--terra); border-color: var(--terra); }

.email-auth { margin: 6px 0 14px; max-width: 64ch; }
.email-auth summary { cursor: pointer; font-weight: 600; color: var(--graf); padding: 10px 0; list-style: none; text-decoration: underline; text-underline-offset: 4px; }
.email-auth summary::-webkit-details-marker { display: none; }
.email-auth summary:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 6px; }
.email-auth .form { margin-top: 10px; }
.form input:user-invalid { border-color: var(--terra); }
#cuenta-acceso form + form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.linkbtn { background: none; border: none; padding: 0; font: inherit; color: var(--terra); text-decoration: underline; cursor: pointer; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .grid-3 { grid-template-columns: 1fr; } }
.fs { border: none; padding: 0; margin: 0 0 14px; }
.fs legend { font-size: 14px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.chk { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 8px 0; font-size: 14px; color: var(--graf); cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--terra); }
textarea { width: 100%; margin: 6px 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--graf); resize: vertical; }
textarea:focus { border-color: var(--graf); outline: 3px solid var(--terra); outline-offset: 2px; }
.sel-talla-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sel-talla { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--graf); min-height: 32px; }

/* ---- pasada de jerarquía: un elemento manda en cada pantalla, paneles solo donde hay contenido que agrupar ---- */
.card { background: var(--arena-l); border: none; box-shadow: none; border-radius: 16px; }
.panel { background: var(--arena-l); border-radius: 16px; padding: 22px 22px 18px; }
.panel.oscuro { background-image: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); }
.panel.oscuro .card-kicker { color: var(--arena); }
.panel.oscuro .fine, .panel.oscuro label.fine { color: var(--arena); }
.panel.oscuro textarea { background-color: rgba(255,255,255,0.06); color: var(--paper); border-color: rgba(255,255,255,0.18); }
.panel.oscuro textarea::placeholder { color: rgba(251,248,242,0.45); }
.panel.oscuro .btn.primary { background: var(--terra); }
.panel.oscuro .btn.primary:hover { background: #A2371F; }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 26px; align-items: start; margin: 6px 0 24px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .grid-2c { grid-template-columns: 1fr; } }
.guia { background-image: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); border-radius: 18px; padding: 26px 26px 22px; position: relative; overflow: hidden; }
.guia::before { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid rgba(226,214,188,0.18); }
.guia .eyebrow { color: var(--arena); }
.pasos { list-style: none; counter-reset: paso; margin: 8px 0 0; padding: 0; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 14px 0; border-top: 1px solid rgba(251,248,242,0.14); }
.pasos li::before { content: counter(paso, decimal-leading-zero); font-family: var(--display); font-size: 26px; color: var(--terra); line-height: 1; }
.pasos li b { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.15; }
.pasos li span { display: block; color: var(--arena); font-size: 14px; margin-top: 3px; grid-column: 2; }
.guia-nota { color: var(--arena); margin: 10px 0 0; }
.hist-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; border-bottom: 3px solid var(--graf); padding-bottom: 14px; margin-bottom: 4px; }
.hist-cab .h-display { margin: 0; }
.cifra b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 7vw, 72px); line-height: 0.95; }
.cifra span { font-size: 13px; color: var(--muted); }
.ledger .reg { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px 96px 96px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reg-fecha b { display: block; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; }
.reg-fecha span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.reg-ej b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; }
.reg-n { text-align: right; }
.reg-n b { display: block; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1; }
.reg-n span { font-size: 12px; color: var(--muted); }
.reg-n.alerta b { color: var(--terra); }
@media (max-width: 640px) { .ledger .reg { grid-template-columns: 56px 1fr; } .reg-n { text-align: left; } .reg-n b { font-size: 20px; } .reg-ej { grid-column: 2; } .reg-n { grid-column: 2; display: inline-block; margin-right: 18px; } }
.bloque { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.bloque:first-of-type { border-top: 3px solid var(--graf); }
.bloque .card-kicker { margin-bottom: 10px; }
.bloque.peligro { border-top: 1px dashed var(--terra); }
.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px; }
.tres p { margin: 0; font-size: 15px; color: var(--graf-2); }
.tres b { display: block; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--graf); margin-bottom: 4px; }
/* semana como tira: siete días, el tipo manda en el color */
.plan-salida { margin-top: 10px; }
.semana { display: flex; gap: 8px; margin: 0 0 22px; align-items: stretch; }
.semana .dia { flex: 3 1 0; min-width: 0; }
.semana .dia.descanso { flex: 1 1 0; }
@media (max-width: 900px) { .semana { flex-wrap: wrap; } .semana .dia { flex: 1 1 calc(50% - 8px); } .semana .dia.descanso { flex: 1 1 calc(25% - 8px); } }
@media (max-width: 560px) { .semana { flex-direction: column; } .semana .dia, .semana .dia.descanso { flex: none; } }
.dia { border-radius: 14px; padding: 14px 14px 12px; min-height: 96px; }
.dia.clubbell { background-image: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); grid-row: span 1; }
.dia.fuerza { background: var(--arena-l); }
.dia.descanso { background: transparent; border: 1px dashed var(--line); min-height: 64px; }
.dia.descanso .dia-nombre { font-size: 15px; }
.dia h4 { margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.dia-nombre { font-family: var(--display); font-weight: 500; font-size: 20px; text-transform: capitalize; line-height: 1; }
.dia .tipo { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); }
.dia.clubbell .tipo { color: var(--arena); }
.dia.descanso .tipo { color: var(--muted); }
.dia ul { list-style: none; margin: 0; padding: 0; }
.dia li { padding: 8px 0; border-top: 1px solid rgba(43,45,49,0.12); font-size: 13px; }
.dia.clubbell li { border-top-color: rgba(251,248,242,0.14); }
.dia li b { display: block; font-weight: 600; line-height: 1.25; }
.dia .dosis { display: block; margin-top: 2px; }
.dia.clubbell .dosis { color: var(--arena); }
.dia .fine { display: block; margin-top: 4px; font-size: 12px; }
.dia.clubbell .fine { color: rgba(251,248,242,0.7); }
.linea-talla { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.nivel { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: var(--arena); color: var(--graf); }
.nivel.alta { background: var(--terra); color: var(--paper); }
.nivel.par { background: var(--petrol); color: var(--paper); }
.dia.clubbell .sel-talla { background: rgba(255,255,255,0.08); color: var(--paper); border-color: rgba(255,255,255,0.22); }
.porque { border-top: 3px solid var(--graf); padding-top: 14px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
@media (max-width: 640px) { .porque { grid-template-columns: 1fr; } }
.porque h4 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0; }
.porque ul { margin: 0; padding-left: 18px; max-width: 72ch; }
.porque li { margin-bottom: 8px; color: var(--graf-2); }
.marca-pierna { display: inline-block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--petrol); border: 1px solid var(--petrol); border-radius: 999px; padding: 1px 7px; margin: 0 0 4px; }
.dia.clubbell .marca-pierna { color: var(--arena); border-color: var(--arena); }
.dia li.pierna b::before { content: ""; }

.lateral { display: grid; gap: 22px; align-content: start; }
.ficha-link { display: block; border-top: 3px solid var(--terra); }
.ficha-link .card-title { font-size: 22px; line-height: 1.15; }
.ficha-link .flecha { color: var(--terra); font-size: 18px; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; }
.ficha-link:hover .flecha, .ficha-link:focus-visible .flecha { transform: translateX(5px); }

.grabador { margin: 0 0 22px; padding: 18px 20px 16px; background: var(--arena-l); border-radius: 16px; }
.grabador-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.grab-tiempo { font-family: var(--display); font-size: 20px; color: var(--terra); }
.grabador video { max-height: 60vh; object-fit: contain; }

/* ---- cabeceras de pantalla: banda con el arco; pie con marca, enlaces y contacto ---- */
.cabecera { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; padding: 26px 28px 22px; margin: 0 0 24px; border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.cabecera .h-display { margin: 4px 0 8px; }
.cabecera .eyebrow { margin-bottom: 0; }
.cab-lead { margin: 0; max-width: 60ch; color: var(--graf-2); font-size: 15px; }
.cab-orb { width: clamp(72px, 10vw, 120px); height: auto; flex: none; opacity: 0.95; }
.cab-orb .orb-arc { stroke-dasharray: 100 100; }
.cabecera.arena { background: var(--arena-l); border: none; }
.cabecera.oscura { background-image: linear-gradient(180deg, #2F3237, #202226); color: var(--paper); border: none; }
.cabecera.oscura .cab-lead { color: var(--arena); }
.cabecera.oscura .eyebrow { color: var(--arena); }
.cabecera.oscura .orb-track { stroke: rgba(226,214,188,0.35); }
.cabecera.oscura .orb-arc { stroke: var(--terra); }
.cabecera.oscura .orb-pivot { fill: var(--arena); }
.cabecera::after { content: ""; position: absolute; right: -90px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; border: 3px solid rgba(43,45,49,0.06); pointer-events: none; }
.cabecera.oscura::after { border-color: rgba(226,214,188,0.14); }
@media (max-width: 640px) { .cabecera { grid-template-columns: 1fr; padding: 20px 18px 18px; } .cab-orb { display: none; } }
.hist-cab { border-bottom: 3px solid var(--graf); padding-bottom: 12px; margin-bottom: 4px; }
.pie { border-top: 1px solid var(--line); background: var(--arena-l); padding: 40px clamp(16px, 4vw, 40px) 28px; margin-top: 40px; }
.pie-cols { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
@media (max-width: 800px) { .pie-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pie-cols { grid-template-columns: 1fr; } }
.pie-logo { height: 30px; display: block; margin-bottom: 10px; }
.pie-marca p { margin: 0 0 6px; font-size: 14px; color: var(--graf-2); max-width: 32ch; }
.pie-kicker { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); margin-bottom: 10px; }
.pie a { display: block; font-size: 14px; color: var(--graf); margin: 0 0 8px; }
.pie a:hover { text-decoration: underline; }
.pie .fine { margin: 6px 0 0; max-width: 34ch; }
.pie-fin { max-width: 1080px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

.form .chk { display: inline-flex; margin: 0 14px 8px 0; font-size: 14px; color: var(--graf); }
.form .fs { display: block; }
#v-plan .grid-2 { align-items: start; }

/* =================== cuaderno editorial: esquinas vivas, filetes, cursiva de acento, fotografía de producto =================== */
:root { --radius: 0; }
.cabecera, .panel, .guia, .dia, .card, .grabador, .informe, .accion, .lateral .ficha, .dia.descanso, .fig canvas, .fig video, .grabador video { border-radius: 0; }
.h-display { font-size: clamp(34px, 5.6vw, 64px); letter-spacing: -0.02em; line-height: 1.02; font-variation-settings: "opsz" 144; }
.h-display em, .hero h1 em { font-style: italic; color: var(--terra); font-weight: 400; }
.hero h1 { font-size: clamp(38px, 6.4vw, 70px); letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
nav a[data-n]::before { content: attr(data-n) " "; font-family: var(--display); font-size: 11px; color: var(--terra); letter-spacing: 0.06em; margin-right: 2px; }
nav a.active { border-bottom: 1px solid var(--graf); padding-bottom: 3px; }
.cabecera { border: none; border-top: 1px solid var(--graf); border-bottom: 1px solid var(--line); padding: 26px 0 24px; background: transparent; }
.cabecera.arena { background: var(--arena-l); padding: 26px 28px 24px; border-top: none; }
.cabecera.oscura { padding: 30px 28px 28px; border: none; }
.cabecera::after { display: none; }
.cabecera.foto { min-height: 240px; }
.cab-foto { position: absolute; right: 0; top: 0; height: 100%; width: 46%; object-fit: cover; object-position: center; opacity: 0.95; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.cabecera.oscura .cab-foto { opacity: 0.55; mix-blend-mode: luminosity; }
.cabecera.foto > div { position: relative; z-index: 1; max-width: 56%; }
@media (max-width: 720px) { .cab-foto { width: 100%; opacity: 0.18; mask-image: none; -webkit-mask-image: none; } .cabecera.oscura .cab-foto { opacity: 0.25; } .cabecera.foto > div { max-width: none; } }
/* portada: producto a la derecha */
#v-login { position: relative; }
.portada-foto { position: absolute; right: clamp(0px, 4vw, 60px); top: 0; margin: 0; width: min(34vw, 420px); pointer-events: none; }
.portada-foto img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(43,45,49,0.18)); }
.portada-foto figcaption { display: grid; gap: 2px; margin-top: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
#v-login .hero { margin-left: 0; max-width: 620px; }
@media (max-width: 960px) { .portada-foto { position: static; width: 200px; margin: 0 auto 10px; } #v-login .hero { margin: 0 auto; } }
/* inicio: portada editorial + índice */
.portada-inicio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: end; border-top: 1px solid var(--graf); padding-top: 22px; margin: 0 0 26px; }
@media (max-width: 760px) { .portada-inicio { grid-template-columns: 1fr; } }
.portada-img { margin: 0; }
.portada-img img { width: 100%; height: auto; display: block; }
.portada-img figcaption { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.indice { display: block; border-top: 1px solid var(--graf); margin: 0 0 34px; }
.indice-fila { display: grid; grid-template-columns: 56px minmax(0, 0.7fr) minmax(0, 1.3fr) 32px; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.indice-n { font-family: var(--display); font-size: 15px; color: var(--terra); letter-spacing: 0.06em; }
.indice-t { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }
.indice-d { color: var(--graf-2); font-size: 15px; max-width: 52ch; }
.indice-f { color: var(--terra); font-size: 22px; text-align: right; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; }
.indice-fila:hover .indice-f, .indice-fila:focus-visible .indice-f { transform: translateX(6px); }
.indice-fila:hover .indice-t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .indice-fila { grid-template-columns: 40px 1fr 24px; } .indice-d { grid-column: 2; } }
.titulo-regla { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--graf); padding-top: 12px; margin: 0 0 14px; }
.nota-margen { font-family: var(--body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* historial: banda de familia */
.banda-familia { margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--graf); }
.banda-familia img { width: 100%; height: auto; display: block; }
.banda-familia figcaption { margin-top: 10px; font-size: 14px; color: var(--graf-2); max-width: 60ch; }
.banda-familia figcaption span { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--graf); }
/* semana y paneles: vivos, con filete */
.dia.fuerza { border-top: 2px solid var(--graf); }
.dia.clubbell { border-top: 2px solid var(--terra); }
.panel { border-top: 2px solid var(--graf); }
.panel.oscuro { border-top: 2px solid var(--terra); }
.guia { border-top: 2px solid var(--terra); }
.guia::before { display: none; }
.hist-cab { border-bottom: 1px solid var(--line); }
.cifra b { font-variation-settings: "opsz" 144; }
.reg-fecha b, .reg-n b, .reg-ej b, .dia-nombre { font-variation-settings: "opsz" 72; }
.pie { background: var(--paper); border-top: 1px solid var(--graf); }

/* sin renders: la personalidad la ponen la tipografía, los filetes y el símbolo */
.portada-inicio.sin-foto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cab-orb.grande { width: clamp(120px, 16vw, 200px); }
.cab-orb.grande .orb-track { stroke: var(--arena); }
#v-login .hero { margin: 8vh auto 0; max-width: 720px; }
.cabecera { position: relative; }
.cabecera .cab-orb { position: static; }

/* =================== cabecera de publicación: dos filas, índice numerado, barra inferior en móvil =================== */
.masthead { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--graf); padding-top: env(safe-area-inset-top); }
.masthead-fila { max-width: 1080px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 40px) 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.masthead-tag { justify-self: end; }
.masthead .brand img { height: 34px; display: block; }
.masthead-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); justify-self: center; }
.masthead-sep { width: 22px; height: 1px; background: var(--line); display: inline-block; }
.masthead-user { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--graf); justify-self: end; }
.masthead nav { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; gap: 0; border-top: 1px solid var(--line); }
.masthead nav a { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px 10px 0; margin-right: 18px; border-bottom: 2px solid transparent; color: var(--graf-2); font-size: 14px; }
.masthead nav a::before { content: none; }
.masthead nav .nav-n { font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; color: var(--terra); }
.masthead nav a.active { color: var(--graf); border-bottom-color: var(--terra); padding-bottom: 10px; }
.masthead nav a.active .nav-t { font-weight: 600; }
.masthead nav a:hover .nav-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (max-width: 720px) {
  .masthead-fila { grid-template-columns: auto 1fr; }
  .masthead-tag { display: none; }
  .masthead nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--paper); border-top: 1px solid var(--graf); padding: 0; max-width: none; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); }
  .masthead nav a { flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; margin: 0; flex: 1 1 0; border-bottom: none; border-top: 2px solid transparent; font-size: 11px; min-height: 48px; justify-content: center; }
  .masthead nav a.active { border-top-color: var(--terra); }
  .masthead nav .nav-n { font-size: 11px; }
  main { padding-bottom: 96px; }
  .pie { padding-bottom: 90px; }
}

/* ritmo de formularios: misma separación entre etiqueta, campo y grupo */
.form label { margin: 0 0 18px; line-height: 1.3; }
.form select, .form input[type=number], .form input[type=email], .form input[type=password], .form input[type=text], textarea { margin-top: 8px; padding: 13px 14px; min-height: 48px; border-radius: 0; border-color: var(--arena-d); }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graf) 50%), linear-gradient(135deg, var(--graf) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.grid-3, .grid-2c { gap: 0 16px; }
.fs { margin: 6px 0 22px; }
.fs legend { margin-bottom: 10px; }
.form .chk { margin: 0 16px 10px 0; }
.form .fine { margin: -6px 0 18px; }
.panel { padding: 24px 24px 20px; }
.form .btn { margin-top: 6px; }
.email-auth .form label { margin-bottom: 16px; }

/* cabecera en grafito */
.masthead { background-image: linear-gradient(180deg, #2F3237, #202226); border-bottom: none; }
.masthead-fila { padding-top: 12px; padding-bottom: 10px; }
.masthead-tag { color: var(--arena); }
.masthead-sep { background: rgba(226,214,188,0.4); }
.masthead-user { color: var(--paper); }
.masthead nav { border-top: 1px solid rgba(251,248,242,0.14); }
.masthead nav a { color: rgba(251,248,242,0.72); }
.masthead nav a.active { color: var(--paper); }
.masthead nav .nav-n { color: var(--terra); }
.masthead .brand img { content: url("assets/logo_h_oscuro.png?b=35"); height: 34px; }
@media (max-width: 720px) { .masthead nav { background-image: linear-gradient(180deg, #2F3237, #202226); border-top: 1px solid rgba(251,248,242,0.2); } }

/* fotografía de archivo con tratamiento de marca (duotono grafito-papel) */
.portada-real { position: absolute; right: 0; top: 0; bottom: 0; width: 38%; margin: 0; overflow: hidden; }
.portada-real img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.portada-real figcaption { position: absolute; left: 24%; bottom: 18px; font-family: var(--display); font-style: italic; font-size: 15px; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
#v-login { min-height: 78vh; }
#v-login .hero { margin-left: 0; max-width: 600px; position: relative; z-index: 1; }
@media (max-width: 960px) { .portada-real { position: relative; width: 100%; height: 34vh; margin: -18px 0 18px; } .portada-real img { mask-image: none; -webkit-mask-image: none; } #v-login .hero { margin: 0 auto; } }
.portada-inicio { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.portada-img img { aspect-ratio: 3 / 2; object-fit: cover; }
.cabecera.foto { overflow: hidden; }
.cabecera.foto .cab-foto { width: 44%; }
.cabecera.foto:not(.arena):not(.oscura) { padding-left: 24px; padding-right: 24px; background: var(--arena-l); }
.cabecera.foto > div { max-width: 54%; }
.cabecera.oscura.foto .cab-foto { opacity: 0.8; mix-blend-mode: normal; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }

.portada-real img { object-position: top center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.portada-real { width: 40%; }
.portada-img img { aspect-ratio: auto; object-fit: contain; }
.cabecera.oscura.foto .cab-foto { opacity: 0.9; }

/* bandas fotográficas a todo el ancho */
.portada-real, .portada-inicio.banda { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 66vh; min-height: 420px; max-height: 760px; overflow: hidden; }
.portada-real img, .portada-inicio.banda img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; mask-image: none; -webkit-mask-image: none; }
.portada-real::after, .portada-inicio.banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,34,38,0.05) 0%, rgba(32,34,38,0.2) 45%, rgba(32,34,38,0.78) 100%); }
.portada-real figcaption, .banda-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 36px; color: var(--paper); font: inherit; text-shadow: none; }
.portada-real figcaption .eyebrow, .banda-txt .eyebrow { color: var(--arena); }
.portada-titulo { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.0; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; max-width: 12ch; }
.portada-titulo em, .banda-txt .h-display em { color: var(--terra); font-style: italic; font-weight: 400; }
.banda-txt .h-display { color: var(--paper); margin: 4px 0 8px; }
.banda-txt .cab-lead { color: var(--arena); }
.portada-inicio.banda { height: 52vh; min-height: 340px; margin-bottom: 28px; border: none; padding: 0; display: block; }
#v-login { min-height: 0; }
#v-login .hero { margin: 26px auto 0; max-width: 720px; }
@media (max-width: 720px) { .portada-real, .portada-inicio.banda { height: 56vh; min-height: 360px; } .portada-real figcaption, .banda-txt { padding-bottom: 24px; } }
.portada-inicio.banda img { object-position: center 30%; }
.pie-logo-wrap { display: inline-flex; align-items: flex-start; gap: 4px; margin-bottom: 10px; }
.pie-logo-wrap .pie-logo { margin-bottom: 0; }
.tm { font-size: 10px; color: var(--muted); line-height: 1; }

.indice-fila { grid-template-columns: 56px minmax(0, 0.7fr) minmax(0, 1.3fr); }
@media (max-width: 640px) { .indice-fila { grid-template-columns: 40px 1fr; } }
.h-display .num { color: var(--terra); font-style: italic; font-weight: 400; margin-right: 6px; }
.masthead-tag { letter-spacing: 0.12em; }

/* bloque de semanas: pestañas */
.sem-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--graf); padding-bottom: 10px; }
.sem-tab { display: grid; gap: 1px; text-align: left; padding: 10px 12px; min-width: 128px; background: transparent; border: 1px solid var(--line); border-radius: 0; font: inherit; cursor: pointer; color: var(--graf); }
.sem-tab .sem-n { font-family: var(--display); font-size: 16px; font-weight: 500; }
.sem-tab .sem-f { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); }
.sem-tab .sem-d { font-size: 11px; color: var(--muted); }
.sem-tab.descarga .sem-f { color: var(--petrol); }
.sem-tab.activa { background: var(--graf); color: var(--paper); border-color: var(--graf); }
.sem-tab.activa .sem-d { color: var(--arena); }
.sem-tab:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.sem-lead { max-width: 70ch; margin: 0 0 16px; color: var(--graf-2); }
.form input[type=date] { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; min-height: 48px; border: 1px solid var(--arena-d); background: #fff; font: inherit; color: var(--graf); }

/* días de descanso: cortos, sin estirar, etiqueta que cabe */
.semana { align-items: flex-start; }
.semana .dia.descanso { flex: 0.9 1 0; min-width: 72px; min-height: 0; padding: 12px 10px; }
.dia.descanso h4 { margin: 0; }
.dia.descanso .dia-nombre { font-size: 15px; }
.dia.descanso .tipo { font-size: 10px; letter-spacing: 0.06em; }
@media (max-width: 900px) { .semana .dia.descanso { flex: 1 1 calc(25% - 8px); } }

/* formularios sobre panel oscuro: misma jerarquía y separación que sobre arena */
.panel.oscuro.form label { color: var(--arena); margin-bottom: 18px; }
.panel.oscuro.form label .fine { display: block; color: rgba(226,214,188,0.75); margin: 2px 0 6px; }
.panel.oscuro.form select, .panel.oscuro.form input[type=date], .panel.oscuro.form textarea { background-color: rgba(255,255,255,0.06); color: var(--paper); border-color: rgba(251,248,242,0.22); }
.panel.oscuro.form select { background-image: linear-gradient(45deg, transparent 50%, var(--arena) 50%), linear-gradient(135deg, var(--arena) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.panel.oscuro.form input[type=date] { color-scheme: dark; }
.panel.oscuro.form textarea { margin: 8px 0 18px; min-height: 180px; }
.panel.oscuro.form .grid-2c { gap: 0 16px; }
.panel.oscuro.form .btn.primary { margin-top: 10px; }
.panel.oscuro .fine#plan-msg { margin-top: 14px; color: var(--arena); }