/* =========================================================
   vn03 – Estilos del rótulo grupal
   Ruta: vn03/css/estilos.css
   ========================================================= */

:root {
  --amarillo: #f6ee7e;
  --carbon: #2b2b2b;
  --blanco: #ffffff;
  --fuente: "Rubik", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--carbon);
  background: var(--amarillo);
  min-height: 100vh;
  padding: 22px;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Marco general ---------- */
.marco {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  border: 2px solid var(--carbon);
  min-height: calc(100vh - 44px);
  background: var(--amarillo);
  overflow: hidden;
}

/* Columnas de puntos laterales (grilla) */
.marco::before,
.marco::after {
  content: "";
  position: absolute;
  top: 120px;
  width: 84px;
  height: 230px;
  background: radial-gradient(var(--carbon) 1.6px, transparent 2px) 0 0 / 14px 14px;
  pointer-events: none;
}
.marco::before { left: 18px; }
.marco::after  { right: 18px; top: auto; bottom: 150px; height: 300px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  border-bottom: 2px solid var(--carbon);
  min-height: 52px;
}
.logo {
  margin: 8px 0 8px 12px;
  padding: 3px 12px;
  background: var(--blanco);
  border: 2px solid var(--carbon);
  box-shadow: 3px 3px 0 var(--carbon);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -.3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.logo small { font-weight: 500; font-size: 10px; letter-spacing: 1px; }
.logo:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--carbon); }

.franja {
  align-self: center;
  justify-self: start;
  margin-left: 24px;
  padding: 2px 10px;
  border-left: 2px solid var(--carbon);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.nav-2 { background: var(--carbon); color: var(--amarillo); display: flex; align-items: center; }
.nav-2 ul { display: flex; flex-wrap: wrap; }
.nav-2 a {
  display: block;
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background .1s steps(2), color .1s steps(2);
}
.nav-2 a:hover,
.nav-2 a:focus-visible,
.nav-2 a[aria-current="page"] {
  background: var(--amarillo);
  color: var(--carbon);
  outline: none;
}

/* ---------- Bloques de texto (palabras sobre fondo oscuro) ---------- */
.bloque {
  display: inline-block;
  background: var(--carbon);
  color: var(--amarillo);
  padding: 0 .16em .06em;
  line-height: 1.05;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: center;
  padding: 44px 48px 40px 130px;
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1;
}
.hero .linea { display: block; margin-bottom: .14em; }
.hero .bloque { margin-right: .12em; }

.caja-tema {
  position: relative;
  align-self: center;
  border: 2px solid var(--carbon);
  background: var(--amarillo);
  padding: 26px 22px 20px;
  font-size: 15px;
  font-weight: 500;
}
.tab {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 1px 8px;
  background: var(--blanco);
  border: 2px solid var(--carbon);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Sello giratorio */
.sello {
  position: absolute;
  top: 18px;
  right: 24px;
  width: 112px;
  height: 112px;
  overflow: visible;
}
.sello text {
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1px;
  fill: var(--carbon);
}
.sello .giro { transform-origin: 60px 60px; animation: giro 22s linear infinite; }
.sello .centro { fill: var(--carbon); }
.sello .centro-txt { fill: var(--amarillo); font-size: 11px; font-weight: 900; letter-spacing: 0; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sello .giro { animation: none; } }

/* ---------- Paneles de integrantes (Menú 1) ---------- */
.paneles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding: 0 48px 0 130px;
}
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 2px solid var(--carbon);
  margin-top: 12px;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.panel:hover,
.panel:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 var(--carbon);
  outline: none;
}
.panel .arte { display: block; height: 128px; border-bottom: 2px solid var(--carbon); }
.arte-1 { background: radial-gradient(var(--blanco) 1.4px, transparent 2px) 0 0 / 16px 16px, var(--carbon); }
.arte-2 {
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, var(--carbon) 39px 41px),
    repeating-linear-gradient(0deg, var(--blanco) 0 18px, var(--carbon) 18px 20px);
}
.arte-3 { background: repeating-linear-gradient(135deg, var(--amarillo) 0 12px, var(--carbon) 12px 24px); }
.arte-4 {
  background:
    conic-gradient(var(--carbon) 25%, var(--blanco) 0 50%, var(--carbon) 0 75%, var(--blanco) 0)
    0 0 / 32px 32px;
}
.panel .nombre {
  display: block;
  padding: 12px 14px 14px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.panel:hover .nombre,
.panel:focus-visible .nombre { background: var(--carbon); color: var(--amarillo); }

/* ---------- Datos académicos: grilla ---------- */
.datos {
  position: relative;
  z-index: 1;
  padding: 46px 48px 10px 130px;
}
.datos h2 {
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1;
  margin-bottom: 22px;
}
.grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--carbon);
  border-left: 2px solid var(--carbon);
}
.celda {
  position: relative;
  padding: 22px 16px 14px;
  border-right: 2px solid var(--carbon);
  border-bottom: 2px solid var(--carbon);
  background: var(--amarillo);
  transition: background .1s steps(2), color .1s steps(2);
}
.celda.doble { grid-column: span 2; }
.celda.ancha { grid-column: 1 / -1; }
.celda .etq {
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 1px 8px;
  background: var(--blanco);
  border: 2px solid var(--carbon);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}
.celda p { font-size: 15px; font-weight: 500; }
.celda:hover { background: var(--carbon); color: var(--amarillo); }

/* ---------- Pie legal ---------- */
.pie {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  border-top: 2px solid var(--carbon);
  padding: 16px 48px 18px 130px;
  font-size: 11px;
  line-height: 1.55;
}
.pie p { max-width: 900px; }
.pie .fin {
  margin-top: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =========================================================
   Página PLAN
   ========================================================= */
.seccion {
  position: relative;
  z-index: 1;
  padding: 18px 48px 22px 130px;
}
.seccion h2 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.subtitulo {
  margin: 26px 0 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.subtitulo::before { content: "///  "; }

.caja-texto {
  position: relative;
  border: 2px solid var(--carbon);
  background: var(--amarillo);
  padding: 24px 22px 18px;
  font-size: 16px;
  font-weight: 500;
  max-width: 860px;
}

/* Problemáticas específicas */
.cuadros {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid var(--carbon);
  border-left: 2px solid var(--carbon);
}
.cuadros li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-right: 2px solid var(--carbon);
  border-bottom: 2px solid var(--carbon);
  font-weight: 500;
  transition: background .1s steps(2), color .1s steps(2);
}
.cuadros li:last-child { grid-column: 1 / -1; }
.cuadros li:hover { background: var(--carbon); color: var(--amarillo); }
.num {
  flex: none;
  background: var(--carbon);
  color: var(--amarillo);
  font-weight: 900;
  font-size: 13px;
  padding: 2px 7px;
}
.cuadros li:hover .num { background: var(--amarillo); color: var(--carbon); }

/* Tabla problema / solución / acción */
.tabla-caja { overflow-x: auto; border: 2px solid var(--carbon); background: var(--blanco); }
.tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla th {
  background: var(--carbon);
  color: var(--amarillo);
  text-align: left;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 16px;
}
.tabla td {
  padding: 12px 16px;
  border-top: 2px solid var(--carbon);
  border-right: 2px solid var(--carbon);
  vertical-align: top;
  font-weight: 500;
}
.tabla td:last-child { border-right: 0; }
.tabla td:first-child { font-weight: 700; background: var(--amarillo); }
.tabla tbody tr:hover td { background: var(--carbon); color: var(--amarillo); }

/* Requerimientos y persona: grillas propias */
.grilla-req { grid-template-columns: repeat(2, 1fr); }
.grilla-req .celda { padding-top: 26px; padding-bottom: 18px; }
.grilla-persona { grid-template-columns: repeat(3, 1fr); }

/* Alcance */
.no-hace {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.no-hace li {
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 2px solid var(--carbon);
  background: var(--blanco);
  font-weight: 500;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.no-hace li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carbon);
  color: var(--amarillo);
  font-weight: 900;
}
.no-hace li:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--carbon); }

/* Persona */
.persona-cab {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
  max-width: 860px;
}
.persona-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--carbon);
  color: var(--amarillo);
  font-weight: 900;
  font-size: 40px;
  box-shadow: 4px 4px 0 var(--blanco);
}
.persona-cab h3 { font-size: 24px; font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.persona-cab p { font-weight: 500; }

.cita {
  margin-top: 22px;
  background: var(--carbon);
  color: var(--amarillo);
  padding: 22px 26px;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.2;
}

@media (max-width: 1000px) {
  .seccion { padding-left: 24px; padding-right: 24px; }
  .grilla-persona { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cuadros, .grilla-req, .no-hace { grid-template-columns: 1fr; }
  .persona-cab { flex-direction: column; }
}

/* =========================================================
   Ajuste de referencia: colores, tipografías y grilla
   ========================================================= */
:root {
  --amarillo: #f7f07d;
  --carbon: #2c2c2c;
  --titulo: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --texto: "Karla", "Helvetica Neue", Arial, sans-serif;
}

/* Texto de lectura: Karla. Títulos y etiquetas: Rubik */
body { font-family: var(--texto); font-size: 16px; }

.logo, .franja, .nav-2 a, .bloque, .hero h1, .seccion h2, .datos h2,
.tab, .etq, .num, .subtitulo, .panel .nombre, .persona-cab h3,
.persona-avatar, .cita, .tabla th, .pie .fin, .sello text, .sello .centro-txt {
  font-family: var(--titulo);
}

/* Grilla cuadriculada de fondo (se ve entre los bloques) */
.marco {
  background-image:
    linear-gradient(rgba(44,44,44,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,44,44,.10) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* Los módulos tapan la grilla para leerse limpios */
.caja-texto, .caja-tema, .cuadros li, .celda { background-color: var(--amarillo); }

/* Marco interior fino, como en la referencia */
.cabecera, .pie { background: var(--amarillo); }
.hero, .paneles, .datos, .seccion { margin-left: 0; }
.celda:hover, .cuadros li:hover { background-color: var(--carbon); }

/* =========================================================
   Apartado: Prototipo en Figma
   ========================================================= */
.prototipo {
  position: relative;
  z-index: 1;
  padding: 46px 48px 0 130px;
}
.prototipo h2 {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1;
  margin-bottom: 22px;
}
.boton-proto {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: stretch;
  border: 2px solid var(--carbon);
  background: var(--blanco);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.boton-proto:hover,
.boton-proto:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 var(--carbon);
  outline: none;
}
.proto-arte {
  min-height: 112px;
  border-right: 2px solid var(--carbon);
  background:
    conic-gradient(var(--carbon) 25%, var(--blanco) 0 50%, var(--carbon) 0 75%, var(--blanco) 0)
    0 0 / 28px 28px;
}
.proto-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 24px;
}
.proto-texto strong {
  font-family: var(--titulo);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.1;
}
.proto-texto small {
  font-family: var(--titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.proto-flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: var(--carbon);
  color: var(--amarillo);
  font-family: var(--titulo);
  font-size: 36px;
  font-weight: 900;
  transition: padding .12s steps(2);
}
.boton-proto:hover .proto-texto,
.boton-proto:focus-visible .proto-texto { background: var(--amarillo); }
.boton-proto:hover .proto-flecha,
.boton-proto:focus-visible .proto-flecha { padding: 0 44px 0 40px; }

@media (max-width: 1000px) {
  .prototipo { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .boton-proto { grid-template-columns: 1fr; }
  .proto-arte { min-height: 70px; border-right: 0; border-bottom: 2px solid var(--carbon); }
  .proto-flecha { padding: 10px 0; }
}

/* =========================================================
   Página MAPA: user flow interactivo (solapas sin JavaScript)
   ========================================================= */
.rad { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.flujo {
  position: relative;
  z-index: 1;
  padding: 18px 48px 22px 130px;
}

/* ---------- Solapas ---------- */
.solapas { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; margin-bottom: -2px; }
.solapas label,
.pasos-nav label {
  cursor: pointer;
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background .1s steps(2), color .1s steps(2);
}
.solapas label {
  padding: 11px 20px;
  border: 2px solid var(--carbon);
  border-bottom: 0;
  background: var(--amarillo);
  font-size: 12px;
}
.solapas label:hover { background: var(--blanco); }

#t-diag:checked ~ .solapas label[for="t-diag"],
#t-paso:checked ~ .solapas label[for="t-paso"],
#t-sec:checked ~ .solapas label[for="t-sec"],
#t-urg:checked ~ .solapas label[for="t-urg"] { background: var(--carbon); color: var(--amarillo); }

#t-diag:focus-visible ~ .solapas label[for="t-diag"],
#t-paso:focus-visible ~ .solapas label[for="t-paso"],
#t-sec:focus-visible ~ .solapas label[for="t-sec"],
#t-urg:focus-visible ~ .solapas label[for="t-urg"] { outline: 3px solid var(--carbon); outline-offset: 2px; }

.vistas { border: 2px solid var(--carbon); background: var(--blanco); padding: 26px; }
.vista { display: none; }
#t-diag:checked ~ .vistas .v-diag,
#t-paso:checked ~ .vistas .v-paso,
#t-sec:checked ~ .vistas .v-sec,
#t-urg:checked ~ .vistas .v-urg { display: block; }

/* ---------- Botones (labels) ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-block;
  cursor: pointer;
  padding: 10px 18px;
  border: 2px solid var(--carbon);
  background: var(--carbon);
  color: var(--amarillo);
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.btn.claro { background: var(--blanco); color: var(--carbon); }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--carbon); }

/* ---------- Diagrama SVG ---------- */
.diagrama-caja { overflow-x: auto; }
.diagrama { display: block; width: 100%; min-width: 680px; height: auto; }
.diagrama .conector { fill: none; stroke: var(--carbon); stroke-width: 2.5; }
.diagrama .punta { fill: var(--carbon); }
.diagrama .rot { font-family: var(--texto); font-size: 13px; font-weight: 700; fill: var(--carbon); }
.diagrama .nodo { cursor: default; outline: none; }
.diagrama .nodo rect { fill: var(--blanco); stroke: var(--carbon); stroke-width: 2.5; transition: fill .1s steps(2); }
.diagrama .nodo text { font-family: var(--titulo); font-weight: 700; font-size: 15px; text-anchor: middle; fill: var(--carbon); }
.diagrama .nodo.destacado rect { fill: var(--amarillo); stroke-width: 4; }
.diagrama .nodo:hover rect,
.diagrama .nodo:focus rect { fill: var(--carbon); }
.diagrama .nodo:hover text,
.diagrama .nodo:focus text { fill: var(--amarillo); }

.textos-flujo { margin-top: 20px; max-width: 860px; }
.textos-flujo p { margin-bottom: 10px; font-size: 16px; }

/* ---------- Paso a paso ---------- */
.pasos-nav { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--carbon); margin-bottom: 26px; }
.pasos-nav li { border-right: 2px solid var(--carbon); }
.pasos-nav li:last-child { border-right: 0; }
.pasos-nav label { display: flex; align-items: center; gap: 8px; height: 100%; padding: 10px; font-size: 11px; background: var(--blanco); }
.pasos-nav label b { flex: none; background: var(--carbon); color: var(--amarillo); padding: 1px 7px; font-size: 12px; }
.pasos-nav label:hover { background: var(--amarillo); }

#s1:checked ~ .pasos-nav label[for="s1"],
#s2:checked ~ .pasos-nav label[for="s2"],
#s3:checked ~ .pasos-nav label[for="s3"],
#s4:checked ~ .pasos-nav label[for="s4"],
#s5:checked ~ .pasos-nav label[for="s5"] { background: var(--carbon); color: var(--amarillo); }
#s1:checked ~ .pasos-nav label[for="s1"] b,
#s2:checked ~ .pasos-nav label[for="s2"] b,
#s3:checked ~ .pasos-nav label[for="s3"] b,
#s4:checked ~ .pasos-nav label[for="s4"] b,
#s5:checked ~ .pasos-nav label[for="s5"] b { background: var(--amarillo); color: var(--carbon); }

/* pasos ya recorridos */
#s2:checked ~ .pasos-nav li:nth-child(-n+1) label,
#s3:checked ~ .pasos-nav li:nth-child(-n+2) label,
#s4:checked ~ .pasos-nav li:nth-child(-n+3) label,
#s5:checked ~ .pasos-nav li:nth-child(-n+4) label { background: var(--amarillo); }

.paso { display: none; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }
#s1:checked ~ .pasos .paso-1,
#s2:checked ~ .pasos .paso-2,
#s3:checked ~ .pasos .paso-3,
#s4:checked ~ .pasos .paso-4,
#s5:checked ~ .pasos .paso-5 { display: grid; }

.paso-texto h3 { font-family: var(--titulo); font-weight: 900; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; margin: 6px 0 14px; }
.paso-texto p { max-width: 560px; font-size: 16px; }
.etiqueta {
  display: inline-block;
  background: var(--carbon);
  color: var(--amarillo);
  padding: 1px 10px;
  font-family: var(--titulo);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.puntos { list-style: none; margin-top: 16px; }
.puntos li { padding: 8px 0 8px 22px; border-top: 2px dotted var(--carbon); position: relative; font-size: 15px; max-width: 560px; }
.puntos li::before { content: "■"; position: absolute; left: 0; font-size: 10px; top: 13px; }

/* ---------- Celular ---------- */
.telefono {
  width: 250px;
  padding: 10px;
  border: 3px solid var(--carbon);
  border-radius: 32px;
  background: var(--amarillo);
  box-shadow: 7px 7px 0 var(--carbon);
}
.pantalla {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 2px solid var(--carbon);
  border-radius: 22px;
  overflow: hidden;
}
.app-top { background: var(--carbon); color: var(--amarillo); padding: 9px 14px; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.app-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.campo { border: 2px solid var(--carbon); padding: 7px 9px; font-size: 12px; font-weight: 700; }
.boton { background: var(--carbon); color: var(--amarillo); text-align: center; padding: 9px; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.boton.claro { background: var(--blanco); color: var(--carbon); border: 2px solid var(--carbon); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid var(--carbon); border-radius: 99px; padding: 1px 9px; font-family: var(--titulo); font-weight: 700; font-size: 11px; }
.chip.on { background: var(--carbon); color: var(--amarillo); }

.item-local { display: flex; align-items: center; gap: 8px; border: 2px solid var(--carbon); padding: 7px 9px; font-size: 12px; font-weight: 700; }
.item-local small { margin-left: auto; font-weight: 500; font-size: 11px; }
.item-local.grande { font-size: 14px; padding: 10px; flex-wrap: wrap; }
.item-local.grande small { margin-left: 0; width: 100%; padding-left: 22px; }
.item-local i, .leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--carbon); flex: none; }

.verde    { background: #44b05f; }
.amarillo { background: #f2c230; }
.rojo     { background: #e0463b; }
.gris     { background: #a3a3a3; }

/* mapa de mentira */
.mapa-fake {
  position: relative;
  flex: 1;
  min-height: 250px;
  background:
    linear-gradient(rgba(44,44,44,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(44,44,44,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    #f3f1d4;
}
.mapa-fake.ruta { flex: none; height: 230px; min-height: 0; }
.calle { position: absolute; background: var(--blanco); }
.calle.h { left: 0; right: 0; height: 12px; border-top: 2px solid var(--carbon); border-bottom: 2px solid var(--carbon); }
.calle.v { top: 0; bottom: 0; width: 12px; border-left: 2px solid var(--carbon); border-right: 2px solid var(--carbon); }
.pin { position: absolute; width: 20px; height: 20px; border: 2px solid var(--carbon); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); z-index: 2; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 9px 12px; border-top: 2px solid var(--carbon); font-size: 11px; font-weight: 700; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 11px; height: 11px; }

.trayecto { position: absolute; left: 22%; top: 24%; width: 130px; height: 100px; border-left: 4px dashed var(--carbon); border-bottom: 4px dashed var(--carbon); border-bottom-left-radius: 0; z-index: 1; }
.punto-a, .punto-b { position: absolute; z-index: 3; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--carbon); font-family: var(--titulo); font-weight: 900; font-size: 13px; }
.punto-a { left: 16%; top: 14%; background: var(--blanco); }
.punto-b { left: 64%; top: 62%; background: var(--carbon); color: var(--amarillo); }

/* ---------- Tareas secundarias ---------- */
.intro-sec { max-width: 760px; margin-bottom: 20px; font-size: 16px; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.tarjeta { border: 2px solid var(--carbon); background: var(--amarillo); transition: transform .12s steps(2), box-shadow .12s steps(2); }
.tarjeta:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--carbon); }
.tarjeta summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px; font-family: var(--titulo); font-weight: 700; font-size: 15px; }
.tarjeta summary::-webkit-details-marker { display: none; }
.tarjeta summary::after { content: "+"; margin-left: auto; font-size: 20px; }
.tarjeta[open] summary::after { content: "–"; }
.tarjeta summary b { flex: none; background: var(--carbon); color: var(--amarillo); padding: 1px 8px; }
.tarjeta[open] summary { background: var(--carbon); color: var(--amarillo); }
.tarjeta[open] summary b { background: var(--amarillo); color: var(--carbon); }
.tarjeta p { padding: 14px; font-size: 15px; border-top: 2px solid var(--carbon); background: var(--blanco); }

/* ---------- Modo urgente ---------- */
.urgente { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; counter-reset: u; }
.urgente li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px solid var(--carbon); background: var(--amarillo); font-size: 14px; }
.urgente li:not(:last-child)::after { content: "→"; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-family: var(--titulo); font-weight: 900; font-size: 24px; }
.urgente b { align-self: flex-start; background: var(--carbon); color: var(--amarillo); padding: 1px 8px; font-family: var(--titulo); }
.urgente strong { font-family: var(--titulo); font-size: 16px; line-height: 1.15; }
.urgente li.meta { background: var(--carbon); color: var(--amarillo); }
.urgente li.meta b { background: var(--amarillo); color: var(--carbon); }

/* ---------- Responsive de la página Mapa ---------- */
@media (max-width: 1000px) {
  .flujo { padding-left: 24px; padding-right: 24px; }
  .pasos-nav { grid-template-columns: repeat(2, 1fr); }
  .pasos-nav li { border-bottom: 2px solid var(--carbon); }
  .paso { grid-template-columns: 1fr; }
  .tarjetas { grid-template-columns: 1fr; }
  .urgente { grid-template-columns: 1fr 1fr; }
  .urgente li::after { display: none; }
}
@media (max-width: 640px) {
  .vistas { padding: 16px; }
  .solapas label { padding: 9px 10px; font-size: 10px; }
  .urgente { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding: 36px 24px 32px 24px; }
  .caja-tema { max-width: 420px; }
  .paneles { grid-template-columns: repeat(2, 1fr); padding: 0 24px; }
  .datos, .pie { padding-left: 24px; padding-right: 24px; }
  .grilla { grid-template-columns: repeat(2, 1fr); }
  .marco::before, .marco::after { display: none; }
  .sello { width: 84px; height: 84px; top: 10px; right: 10px; }
}
@media (max-width: 640px) {
  body { padding: 10px; }
  .cabecera { grid-template-columns: 1fr; }
  .logo { align-self: start; margin: 8px 12px; }
  .franja { display: none; }
  .nav-2 { border-top: 2px solid var(--carbon); }
  .nav-2 a { padding: 12px 14px; }
  .paneles { grid-template-columns: 1fr; }
  .grilla { grid-template-columns: 1fr; }
  .celda.doble, .celda.ancha { grid-column: auto; }
}